Question

如何在angular指令中使用单向绑定？我无法在此找到一个简单易用的示例，而且文档也不容易理解：

＆安培;或＆amp; attr - 提供在上下文中执行表达式的方法父范围。如果未指定attr名称，则为属性名称假定与本地名称相同。给定范围的小部件定义：{ localFn：＆＃39;＆安培; myAttr＆＃39;然后隔离范围属性localFn将指向 count = count + value表达式的函数包装器。经常希望通过表达式从隔离范围传递数据在父范围内，可以通过传递本地地图来完成变量名和值到表达式包装器fn中。例如，如果表达式是增量（金额），那么我们可以指定金额通过将localFn调用为localFn（{amount：22}）来获取值。

Answer 1

您可以在指令中使用&运算符，您可以按如下方式使用该指令：

HTML：

  <div ng-app="myApp" >
      <drink flavor="ctrlFlavor" ng-init="ctrlFlavor = 'blackberry'"> </drink>
      <span>Flavor={{ctrlFlavor}}</span>
  </div>

请注意，您可以根据需要初始化ctrlFlavor，您可以在ng-init块中或在controller中执行此操作，如下面的JSFiddle。

JS：

var app = angular.module('myApp', []);

app.directive("drink", function () {
  return {
    scope: {
      flavor: "&"
    },
    template: '<input value="{{flavor()}}"/>',
  };
});

请特别注意{{flavour()}。神奇的是它返回一个函数，因此你无法设置值。

小提琴：http://jsfiddle.net/sgx8zdxc/

您可以使用它并注意，更改输入中的值将（显然）将值保留在父作用域中。另外，我认为你也不能ngModel='flavor()'。

Answer 2

单向绑定示例：

<body ng-app ng-init="firstName = 'John'; lastName = 'Doe';">
  <strong>First name:</strong> {{firstName}}<br />
  <strong>Last name:</strong> <span ng-bind="lastName"></span>
</body>
</html>

单向数据绑定，因为模型值（此处变量代表模型）会自动分配给通过数据绑定表示法指定的HTML占位符元素，但HTML元素不会更改模型中的值（单向）。

Angular Directive中的一种绑定方式

2 个答案: