Question

我创建了一个简单的Angular JS指令：

收到数字X
计算X

这是指令代码

(function() {

'use strict';

  angular
    .module('main')
    .directive('myDirective', myDirective);

  /** @ngInject */
  function myDirective() {
    return {
      bindToController: true,
      controller: MyController,
      controllerAs: 'vm',
      restrict: 'E',
      scope: {
        number: '<'
      },
      templateUrl: 'my-directive.template.html',
    };
  }

  /** @ngInject */
  function MyController($scope, $timeout) {
    var vm = this;

    // calculate(); // previous and next = NaN
    // $timeout(calculate, 1); // Works
    vm.watch = $scope.$watch('vm.number', calculate); //Works

    function calculate() {
      vm.previous = vm.number - 1;
      vm.next = vm.number + 1;
      vm.watch();
    }
  }
})();

以下是我的称呼方式

<my-directive number="7"></my-directive>

我的问题是：

当控制器运行时，传递给指令的号码尚未评估

经过研究，我发现了两种解决方案，但看起来并不好看：

使用MyController中的$timeout服务
使用MyController中的$scope.$watch服务

我认为如果评估数据需要更长时间，解决方案（1）有时可能会下降。

由于我不需要观看数据，使用解决方案（2）我在执行功能calculate后删除了手表，但在这里使用手表感觉不对。

那么，有一个更好的解决方案吗？或解决方案（2）就好了？

Answer 1

问题出在您的模块声明中。

此

angular
.module('main')

应该是这个

angular
.module('main', [])

声明新模块时需要[requires]参数。

Answer 2

正如用户Claies建议的那样，我为此创建了一个组件，并且它运行良好。

这是组件声明

(function() {
  'use strict';

  angular
    .module('main')
    .component('myComponent', {
      templateUrl: 'my-component.template.html',
      controller: MyController,
      controllerAs: 'vm',
      bindings: {
        number: '<',
        goNext: '&',
        goPrevious: '&'
      }
    });

  /** @ngInject */
  function MyController() {
    var vm = this;

    vm.$onInit = onInit;
    vm.$onChanges = onNumberChange;

    vm.onNext = onNext;
    vm.onPrevious = onPrevious;

    function onInit() {
      calculate();
    }

    function onNumberChange(changesObj) {
      if (changesObj.number) {
        calculate();
      }
    }

    function onNext() {
      vm.goNext();
    }

    function onPrevious() {
      vm.goPrevious();
    }

    function calculate() {
      vm.previous = vm.number - 1;
      vm.next = vm.number + 1;
    }

  }
})();

要测试组件中的$onChanges功能，我添加了add和subtract个操作。

以下是我在HTML页面中使用该组件的方法

<my-component number="vm.number" go-next="vm.goNext()" go-previous="vm.goPrevious()"></my-component>

我可以在Plunker

中找到我完成的完整示例

使用“Controller As”语法

2 个答案: