鉴于以下Plunker:http://plnkr.co/edit/YicBDARAf5umI0PdCL8L?p=preview
为什么在指令控制器中没有设置$ scope.someVal?
我希望模板的输出显示
someVal = ABC controllerVal=DEF
但是显示
someVal = 123 controllerVal=DEF
HTML:
<html>
<head>
<script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
</head>
<body ng-app='myApp'>
<my-test some-val="123"></my-test>
<script>
angular.module("myApp", [])
.directive("myTest", function() {
return {
restrict: "E",
scope: {
someVal: "@"
},
template: "someVal = {{someVal}} controllerVal={{controllerVal}}",
controller: function($scope) {
$scope.someVal = "ABC";
$scope.controllerVal = "DEF";
}
}
});
</script>
</body>
</html>
答案 0 :(得分:2)
你没有得到更新的scope.someVal
(从指令控制器完成),这是单向绑定值(@
)的原因是因为当指令编译它时会覆盖scope.someVal具有来自一次时间绑定的插值(基本上它在创建隔离范围时在attr.someVal
上运行插值)。所以最终你会看到一次性约束价值。一种解决方法是通过调用异步来延迟覆盖,以便在下一个摘要周期中更新它。
示例: - 将其包裹在$ timeout中或使用将其推送到异步队列
controller: function($scope, $timeout) {
$scope.$evalAsync(init);//Set up initialization
$scope.controllerVal = "DEF";
function init(){
$scope.someVal = "ABC";
}
}
<强> Demo 强>