範圍變化不會反映

Question

我有一個刪除按鈕指令看起來像待辦事項列表，

Howerver，當我的垃圾桶按鈕點擊，視圖沒有得到新的待辦事項刷新。我用scope.$apply()迫使消化週期，仍不起作用

HTML代碼，

<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代碼，

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() 
     }) 
    } 
    } 
}) 

控制檯日誌，

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

的問題是你要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創建一個新數組，因此scope.todos指向新數組而不是指向父作用域（Controller）scope.todos。並且您的視圖仍在監聽父（控制器）scope，因此視圖沒有更新。

但是，您可以使用.splice，它不會更改子作用域的引用。因此，當您更新子範圍時，父母$scope.todos也會得到更新，因爲父母&孩子之間的雙向綁定。

將$ index添加到ngRepeat指令中。

<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> 

而你的指令bind handlder應該如下。

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

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

    }); 

Answer 3

的主要問題是「假」仍然是一個值，仍然會在返回的輸出分配一個新的對象風景。可能替代array.filter的是array.splice，它將簡單地從陣列中移除項目。

我創建了一個小提琴證明這一點：

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

相關變化的這部分代碼：

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(); 

     }) 

    } 
    } 
})