CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Diego Unanue
Diego Unanue

Reputation: 6826

Simple Isolated Scope Function Parameters not called

I'm trying to call an isolated scope function. The function is removeFriend(item) takes and item and remove it from an array. It's called from a directive named removeFriend that send in a function method="removeFriend(item)" the item to remove, "method" is the name of the function parameter in the directive notifyParent: '&method'. When I click on the remove button the function of the directive is reached but it dosen't call the parent function.

Here is the code:

Here is the html:

<div class="panel panel-primary">
<div class="panel-heading" ng-click="collapse()">{{user.name}}</div>


<h4>Friends</h4>
<ul>
  <li ng-repeat='item in user.friends'>
    {{item}}

    <!-- This is the directive with the function I want to call -->
    <remove-friend method="removeFriend(item)"></remove-friend>
  </li>
</ul>

Here is the controller:

var myapp = angular.module('app', []);

angular.module('app').controller("mainCtrl", function($scope) {
$scope.a = "abc";
var a = a;



$scope.user1 = {
  name: "Diego",
  address: {
    street: 'Santa Fe 654 2e',
    city: 'Córdoba',
    planet: 'Pluton'
  },
  friends: ['Amigo 1', 'Amigo 2']
}

$scope.user2 = {
  name: "Juan",
  address: {
  street: 'Santa Fe 654 2e',
  city: 'Córdoba',
  planet: 'Pluton'
  },
  friends: ['Amigo 1', 'Amigo 2']
}



 $scope.removeFriend = function(friend) {
    console.log('hello');
    var idx = $scope.user.friends.indexOf(friend);

    if (idx > -1) {
      $scope.user.friends.splice(friend, 1);
    }
  }

});

This is the directive template:

<button class="btn btn-xs btn-success" ng-click="confirmRemove()">Remove</button>

This is the directive definition:

myapp.directive('removeFriend', function() {
 return {
    restrinc: 'E',
    templateUrl: 'removeFriend.html',
    scope: {
       notifyParent: '&method'
    },
    controller: function($scope) {

    //Function that calls the parent function removeFriend(friend)
      $scope.confirmRemove = function(){
       console.log('removing');
       $scope.notifyParent();
      }
    }
   }
 })

Upvotes: 0

Views: 49

Answers (1)

smb
smb

Reputation: 579

Some things to validate:

  • Disable Chrome Cache
  • Be sure ng-controller is on the outer most div tags for the scope data (didn't see it above, but assume you left it out?)
  • You have a typo for 'restrict'

Check out this plnkr: http://plnkr.co/edit/14qKAyclJUg9uCItLDma?p=preview

I did change $scope.user1 to $scope.user for this example.

Upvotes: 0

Related Questions