为什么我不能修改指令控制器中的隔离范围值?

时间:2014-09-26 16:16:33

标签: angularjs angularjs-directive angularjs-scope

鉴于以下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>

1 个答案:

答案 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