Question

In this plunk我有一个实例化两次的指令。在每种情况下，指令的结果（由其模板定义）都会正确显示。

问题是getValue2()是否需要定义为scope.getValue2或var getValue2。何时在指令中使用每个？

HTML

    instance 1 = <div dirx varx="1"></div>
    <br/>
    instance 2 = <div dirx varx="2"></div>

的Javascript

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

app.controller('myCtl', function($scope) {

});

app.directive('dirx', function () {

    var directive = {};

    directive.restrict = 'EA';

    directive.scope = {    
            varx: '='
    };

    directive.template = '{{getValue()}}';

    directive.link = function (scope, element, attrs) {

        scope.getValue = function(){
          return getValue2();
        };

      var getValue2 = function() {
        return scope.varx * 3;
      }

    };

    return directive;

});

Answer 1

您需要在$scope对象上声明某个属性的唯一时间是它是您的应用程序状态的一部分。

Angular 1.x将＆＃34; dirty check＆＃34; $scope并对DOM进行更改。可以观察$scope对象上的任何内容，因此您可以观察变量和触发器功能。这就是为什么Angular搜索＆amp;几乎没有JS代码可以完成过滤。话虽这么说，保持“范围”是一般的好习惯。没有任何不需要的东西。

就getValue()而言，是否在HTML中调用渲染或指令？如果答案是＆＃34; no＆＃34;，那么它不需要在$scope对象上声明为属性。

由于您在指令模板中使用getValue()，因此它会在UI中呈现，并且需要位于Angular的$scope中。

你也可以这样做： directive.template = '{{ varx * 3 }}';

docs：https://docs.angularjs.org/guide/scope

Answer 2

首先，代码包含不必要的嵌套调用。它可以是：

  var getValue2 = function() {
    return scope.varx * 3;
  }

  scope.getValue = getValue2;

第二件事是getValue2没有被重用而且不需要，它可以是：

  scope.getValue = function() {
    return scope.varx * 3;
  }

由于getValue在模板中使用，因此应将其作为scope.getValue公开。即使它不会在模板中使用，将函数公开到可测试性范围也是一种很好的做法。因此，如果确实需要getValue2，则将其定义并调用为scope.getValue2会提供较小的开销，但会提高可测试性。

请注意，使用链接功能和直接访问范围对象属性是一种过时的做法，而最新的方法涉及controllerAs和this。

何时在指令中使用'scope'与'var'声明函数？

2 个答案: