Angular Directive:何时使用链接,何时使用范围?

时间:2017-08-29 05:05:03

标签: angularjs angularjs-directive

在构建角度指令时,我发现有一种方法可以将值从父作用域传递到子作用域。我所知道的一些方法是:

  • 根本不要使用隔离范围,孩子就可以使用 访问父范围(您可以安装一个非常好的参数,这是不好的)。
  • 使用attributes功能的link参数。
  • 使用隔离范围并绑定到属性(例如param: '='

这里的代码:https://codepen.io/ariscol/pen/WEKzMe显示了两个类似的指令,一个用链接完成,另一个用隔离范围中的双向绑定完成。此外,它显示了与双向绑定相比,它们与1次绑定的区别。作为参考,这里有两个指令:

app.directive("contactWidgetWithScope", function() {
  return {
    restrict: 'E',
    template: '<div ng-bind="contact.name"></div>'
      + '<div ng-bind="contact.title"></div>'
      + '<div ng-bind="contact.phone"></div>',
    scope: {
      contact: '='
    }
  };
});
app.directive("contactWidgetWithLink", function() {
  return {
    restrict: 'E',
    template: '<div ng-bind="name"></div>'
      + '<div ng-bind="title"></div>'
      + '<div ng-bind="phone"></div>',
    scope: {},
    link: function(scope, elem, attrs) {
      scope.name = attrs.contactname;
      scope.title = attrs.contacttitle;
      scope.phone = attrs.contactphone;
    }
  };
});

现在,如果我试图决定哪种方式“更好”,我可能会考虑如何使用这个指令。如果我要有一千个联系人,并且我想使用此指令列出页面上的所有一千个联系人,例如,在ng-repeat中,我想我会在{{1}时获得更好的性能因为它不会添加任何观察者。另一方面,如果我希望将此指令合并到页眉中,并且我希望在单击列表中的任何给定联系人时更新联系人详细信息,我希望双向绑定,以便进行任何更改父作用域中的某些“selectedContact”属性将自动反映在此指令中。这些是正确的考虑因素吗?还有其他人吗?

为了增加我的困惑,可以很容易地将一个观察者添加到链接属性并实现单向绑定,以便属性值的更改将反映在子节点中。这样做会或多或少地影响性能吗?相反,我想你可以对范围版本的值进行一次性绑定,从而消除性能影响,例如:link。那应该有用,对吗?似乎该选项为您提供了很大的灵活性,因为这意味着调用该指令的人可以决定是否要支付性能价格以获得双向绑定的好处。这些考虑是否准确?在决定如何为我的指令提供值时,我还应该考虑其他事项吗?

0 个答案:

没有答案