AngularJS - 當雙向綁定值發生變化時在指令中調用函數

我已經有了一個指令，使用=的屬性上的雙向數據綁定的所有設置，我可以看到一切正常。現在我堅持需要在指令中調用一個函數，只要我的綁定屬性在父作用域中發生變化，我就無法弄清楚如何解決這個問題。AngularJS - 當雙向綁定值發生變化時在指令中調用函數

我基本上創建了一個與對象數組一起工作的ui複選框按鈕的版本。您通過指令allowed數組（包含所有不同的選項）和applied數組（其中包含與allowed相同的對象）。爲了檢查一個對象是否在allowed數組中，我有另一個數組，它只是id屬性。在指令中，這很好用，但如果applied數組在指令之外更改，id數組永遠不會更新。

的指令：

angular.module('MyApp',[]) 
.directive('btnCheckboxGroup', function(){ 
    return { 
     restrict: 'E', 
     // controller: DirCtrl, 
     templateUrl: 'btnCheckboxGroup.html', 
     scope: { 
      allowed: '=', 
      applied: '=', 
      id: '=', 
      title: '=' 
     }, 
     link: function(scope, elem, attrs){ 
      scope.abp = []; 

      // this works right away, but how do I run it when the parent scope updates it? 
      angular.forEach(scope.applied, function(obj){ 
       scope.abp.push(obj[scope.id]); 
      }); 

      scope.addRemove = function(a){ 
       var index = scope.abp.indexOf(a[scope.id]); 

       // doesn't exist, add it 
       if(index === -1){ 
        scope.abp.push(a[scope.id]); 
        scope.applied.push(a); 

       // does exist, remove it 
       } else { 
        scope.abp.splice(index, 1); 
        for(var i in scope.applied){ 
         if(scope.applied[i][scope.id]==a[scope.id]){ 
          scope.applied.splice(i,1); 
          break; 
         } 
        } 
       } 
      }// end addRemove() 

     } 
    }; 
});

JSFiddle

我試過很多像scope.$watch，attrs.$observe事情的變化，並試圖在一個點嘗試單向數據綁定與@，並導致許多事情崩潰。

那麼我在這裏錯過的魔法是什麼？

來源

2014-03-04 aron.duby

您可以將第三個參數傳遞給$ watch，以更改它比較舊值和新值的方式。見Angular docs

$watch(watchExpression, [listener], [objectEquality]);

如果將其設置爲true，它會拿起變化陣列的內容，而不是僅在數組引用的變化。這確實會對性能產生影響（取決於數組的長度）。僅檢查數組的長度不包括元素數保持不變但元素本身發生更改的情況。

你的情況，你需要做這樣的事情：

scope.$watch(
    "applied", 
    function() { 
     scope.abp = []; 
     angular.forEach(scope.applied, function(obj){ 
      scope.abp.push(obj[scope.id]); 
     }); 
    }, 
    true);

來源

2014-03-04 08:18:03

應該知道這將是小東西，我已經有一個很小的小調整 –

另外一點需要注意的是嘗試，你不使用'elem'和'attrs'方法參數。你所有的代碼都可以（也應該）放在控制器中。 –

感謝您的支持，這很有道理。我在指令中做的第二部分確實使用了'elem'和'attrs'，但它可能不會被重寫。除了「這是角度的方式」之外，將它放在控制器中是否有優勢？如果這是原因，那麼我的下一個問題是爲什麼它是角度的方式。 –

這是你在找什麼？

 scope.$watch(function() { 
      return scope.applied.length; 
     }, function(val) { 
      console.log(val); 
      console.log(scope.applied); 
     });

關於範圍的數組不會更改，但其長度呢，所以如果你使用的$watch串變它將不火，但使用功能來看，在數組的長度將。更多信息，請參見docs

來源

2014-03-04 07:50:06 ivarni

AngularJS - 當雙向綁定值發生變化時在指令中調用函數

回答

相關問題