AngularJS指令和单向数据绑定

时间:2016-04-11 14:38:12

标签: angularjs

我正在阅读一篇关于指令隔离范围的文章https://blog.umur.io/2013/07/02/angularjs-directives-using-isolated-scope-with-attributes/

这是代码

<div ng-app="myApp" ng-controller="myController">
<div my-directive
     my-text="hello {{ bar }}"
     my-two-way-bind="foo"
     my-one-way-bind="bar"></div>
</div>


angular.module("myApp",[])
  .directive("myDirective", function () {
    return {
      restrict: "A",
      scope: {
        text: "@myText",
        twoWayBind: "=myTwoWayBind",
        oneWayBind: "&myOneWayBind"
      },
      template: 'text: {{text}} twoWayBind: {{twoWayBind}} oneWayBind: {{oneWayBind}}',
      link: function (scope, element, attr) {
       alert(scope.oneWayBind());
      }
    };
}).controller("myController", function ($scope) {
  $scope.foo = {name: "Manoj"};
  $scope.bar = "qwe";
});

我理解上面的代码和代码正在运行但有一点不清楚当我尝试从链接函数访问孤立范围的 oneWayBind 变量时,就像alert(scope.oneWayBind)一样没有工作,没有价值但是当我尝试访问类似函数alert(scope.oneWayBind())然后它工作.....不明白为什么?

其他范围变量在我尝试访问类似alert(scope.text) or alert(scope.twoWayBind)时起作用,这些都在没有访问功能的情况下工作,但为什么我们必须访问隔离范围的 oneWayBind 变量,如函数。

请一些人帮我理解。 jsfiddle https://jsfiddle.net/tridip/v3c7gyen/1/

1 个答案:

答案 0 :(得分:0)

您必须以这种方式访问​​“单向绑定”的原因是因为&表示该属性需要表达式。变量scope.oneWayBind始终设置为一个函数(即使您没有将属性设置为html代码中的任何内容),在调用时,它会计算传递给该属性的表达式。您表明可以像这样调用它来获取值

scope.oneWayBind()

而这

scope.oneWayBind

将返回对包含传入的表达式的函数的引用。

供参考:https://docs.angularjs.org/api/ng/service/$compile#-scope-

  

&&attr -   ...   给定<my-component my-attr="count = count + value">和隔离范围定义scope: { localFn:'&myAttr' },隔离范围属性localFn将指向count = count + value表达式的函数包装 ...


您也可以使用&属性执行此操作:

scope.oneWayBind({someProperty: 'someValue'})

这将导致someProperty在本地可用于传递给one-way-bind的表达式。换句话说,one-way-bind="method(someProperty)"会导致scope.oneWayBind({someProperty: 'someValue'})实际执行method('someValue')

这在角度文档页面的相同部分中有记录:

  

通常需要通过表达式将数据从隔离范围传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成。例如,如果表达式为increment(amount),那么我们可以通过将localFn称为localFn({amount: 22})来指定金额值。