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

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

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

Answer 1

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

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

Answer 2

做这样的事情：

＆＃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;

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

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

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

2 个答案: