控制器和指令中的角度范围问题

时间:2014-09-25 20:12:38

标签: angularjs angularjs-directive angularjs-scope

我在控制器中有以下内容:

 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 =&#39; foobar&#39;。 然后,在指令中,我用以下内容替换了日志行,并打印了“foobar&#39;”

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

我不知道为什么$ scope.test按预期工作,但$ scope.foos不是?

2 个答案:

答案 0 :(得分:1)

我认为这是一个异步问题,因为Restangular将作为一个promise运行,因此当指令链接函数运行时不会设置foo。要解决此问题,您需要添加一个手表以查看范围何时发生变化

$ scope。$ watch(&#39; foos&#39;,function(newValue,oldValue){console.log(newValue,oldValue);});

答案 1 :(得分:0)

做这样的事情:

&#13;
&#13;
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);
    }
  };
});
&#13;
<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>
&#13;
&#13;
&#13;

基本上指令中的foos绑定到控制器上暴露的foos。

同样在你的链接函数中,不要在函数参数的名称中使用$,例如调用第一个参数范围而不是范围,因为这些参数实际上没有注入到链接函数中(它&#39;一个常规函数调用,如果你命名第一个参数bob它仍将等于范围)