我在控制器中有以下内容:
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不是?
答案 0 :(得分:1)
我认为这是一个异步问题,因为Restangular将作为一个promise运行,因此当指令链接函数运行时不会设置foo。要解决此问题,您需要添加一个手表以查看范围何时发生变化
$ scope。$ watch(&#39; foos&#39;,function(newValue,oldValue){console.log(newValue,oldValue);});
答案 1 :(得分:0)
做这样的事情:
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它仍将等于范围)