控制器和指令中的角度范圍問題

Question

我在控制器中具有以下內容：

 Restangular.all('foos').getList().then(
    function(foos) {
        $scope.foos = foos;
    });

在HTML頁面中，我可以執行以下操作：

<div ng-repeat="foo in foos | orderBy:'fooName'">

我想將ng-repeat移至指令，因此指令中包含以下內容：

app.directive('interactionFoos', function(){

return {
    restrict: 'A',
    scope : false,
    link: function($scope, $element, $attrs) {

        //console.log("*** size: " + $scope.foos.length);
    }
}

});

在HTML中，我將擁有：

<div interaction-foos></div>

在指令中，我對$ scope.foos不確定。 作為測試，在控制器中，我進行了硬編碼：$ scope.test ='foobar'。 然后，在指令中，我將日志行替換為以下內容，並顯示“ foobar”：

console.log("*** test: " + $scope.test);

我不知道為什么$ scope.test可以正常運行，但是$ scope.foos卻不能正常工作？

Answer 1

我相信這是一個異步問題，因為Restangular將作為一個承諾運行，因此當指令鏈接函數運行時不會設置foo。 為了解決這個問題，您需要添加手表以查看范圍何時更改

$ scope。$ watch（'foos'，function（newValue，oldValue）{console.log（newValue，oldValue）;}）;

Answer 2

做這樣的事情：

 angular.module("app", []) .controller("interactionCtrl", function($scope) { $scope.foos = ["A", "B", "C"]; }) .directive("interactionFoos", function() { return { restrict: 'A', scope: { foos: '=' }, link: function(scope, element, attrs) { alert(scope.foos.length); } }; }); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script> <div ng-app="app" ng-controller="interactionCtrl"> <div interaction-foos foos="foos"></div> </div> 

基本上，指令中的foo綁定到控制器上公開的foo。

在鏈接函數中也不要在函數參數的名稱中使用$，例如，調用第一個參數作用域而不是作用域，因為那些參數並沒有真正注入到鏈接函數中（如果您命名，則是常規函數調用）第一個參數bob仍將等於范圍）