Question

我正在试图找出AngularJS指令。我有以下JSFiddle的例子，我正在尝试做的事情。 https://jsfiddle.net/7smor9o4/

正如您在示例中所看到的，我希望vm.alsoId变量等于vm.theId。在模板vm.theId中显示正确的值，但vm.alsoId不显示。

我做错了什么？我怎样才能实现目标。

如果最终的想法有助于执行以下内容：

function directive(service) {
  var vm = this;
  vm.entity = null;

  init();

  function init() {
    service.getEntity(vm.theId).then(function (entity) {
      vm.entity = entity;
    });
  }
}

Answer 1

正如您所注意到的，bindToController绑定在控制器的构造函数中并不是立即可用的（与$scope不同）。您正在寻找的是Angular 1.5引入的功能：生命周期挂钩，特别是$onInit。

你有正确的想法;只需替换您的init函数定义和调用，如下所示：

vm.$onInit = function () {
    service.getEntity(vm.theId).then(function (entity) {
      vm.entity = entity;
    });
};

here is your updated fiddle。（或者，如果没有此解决方案，您需要watch。）

Answer 2

Angular建议您“仅当您希望将API暴露给其他指令时才绑定控制器。否则请使用链接。”

这是一个使用链接功能的工作fiddle。

angular.module('app', [])
  .directive('directive', directive);

angular.element(function() {
  angular.bootstrap(document, ['app']);
});

function directive() {
  return {
    restrict: 'E',
    scope: {
      theId: '<'
    },
    template: `
        alsoId: <span ng-bind="alsoId"></span>
      theId: <span ng-bind="theId"></span>`,
    link: link
  };
}
function link(scope, element, attrs) {

  init();

  function init() {
    scope.alsoId = scope.theId;
  }
}

AngularJS指令绑定到控制器

2 个答案: