指令的绑定函数的范围更改未反映

Question

I have a list of todo items with a delete button directive that looks like,

Howerver, when i click on the trash button, the view is not getting refreshed with the new todos. I used scope.$apply() to force the digest cycle, still it doesn't work

HTML code,

<div ng-controller="todoCtrl">
   <ul>
      <li ng-repeat="todo in todos">
        <i class="fa fa-trash-o fa-lg" sk-del="{{todo}}" todos="todos"></i>{{todo}}
      </li>
   </ul>
</div>

Javascript code,

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

app.controller('todoCtrl',  function ($scope, $element) {
  $scope.todos = ["eat", "pray", "live"]
})

app.directive("skDel", function(){
  return {
    scope:{
      todos: '='
    },
    link: function(scope, elem, attr){
      elem.bind("click", function(){
        scope.todos = scope.todos.filter(function(el){
          console.log("the return value for todo - " + el + " is " + (el != attr.skDel))
          return el != attr.skDel
        })
        console.log("new set of todos ----" + JSON.stringify(scope.todos))
        scope.$apply()
      })
    }
  }
})

Console logs,

the return value for todo - eat is false
the return value for todo - pray is true
the return value for todo - live is true
new set of todos ---- ["pray","live"]

Answer 1

The problem is you are assigning a new object to todos

 var app = angular.module('my-app', [], function() {}) app.controller('todoCtrl', function($scope, $element) { $scope.obj = { todos: ["eat", "pray", "live"] } }) app.directive("skDel", function() { return { scope: { todos: '=' }, link: function(scope, elem, attr) { elem.bind("click", function() { scope.todos = scope.todos.filter(function(el) { console.log("the return value for todo - " + el + " is " + (el != attr.skDel)) return el != attr.skDel }) console.log("new set of todos ----" + JSON.stringify(scope.todos)) scope.$apply() }) } } }) 

 <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app"> <div ng-controller="todoCtrl"> <ul> <li ng-repeat="todo in obj.todos"><i class="fa fa-trash-o fa-lg" sk-del="{{todo}}" todos="obj.todos"></i>{{todo}}</li> </ul> <pre>{{todos | json}}</pre> </div> </div> 

Answer 2

scope.todos = scope.todos.filter()

.filter creates a new array, hence scope.todos is pointing to the new array instead of pointing to the parent scope (Controller) scope.todos . And your view is still listening to the parent (controller) scope , hence the view is not getting updated.

However you can use .splice , which won't change the reference of the child scope. And thus when you update the child scope, parent $scope.todos also get's updated, because of two way binding between parent & child.

Add $index to the ngRepeat directive.

<li ng-repeat="todo in todos track by $index">
    <i class="fa fa-trash-o fa-lg" sk-del="{{todo}}" todos="todos" index={{$index}}></i>{{todo}}
</li>

And you directive bind handlder should be as below.

  elem.bind("click", function(){

    scope.todos.splice(attr.index,1);
    scope.$apply();

  });

Answer 3

The main issue is that 'false' is still a value, and will still return output on the view. Possibly an alternative to array.filter is array.splice which will simply remove the item from the array.

I've created a fiddle demonstrating this:

http://jsfiddle.net/spanndemic/79cqxxby/

Relevant change is to this part of the code:

html:

<div ng-app="app">
  <div ng-controller="todoCtrl">
     <ul>
        <li ng-repeat="todo in todos">
          <i class="fa fa-trash-o fa-lg" sk-del="{{todo}}" todos="todos" data-index="{{$index}}"></i>{{todo}}
        </li>
     </ul>
  </div>
</div>

js:

var app = angular.module('app',  [])
.controller('todoCtrl',  function ($scope, $element) {
  $scope.todos = ["eat", "pray", "live"]
})

app.directive("skDel", function(){
  return {
    scope:{
      todos: '='
    },
    link: function(scope, elem, attr){
      elem.bind("click", function(){

        scope.todos.splice(attr.index, 1);

        console.log("new set of todos ----" + JSON.stringify(scope.todos));

        scope.$apply();

      })

    }
  }
})