AngularJS 指令绑定到控制器

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

Angular建议您绑定一个控制器"only when you want to expose an API to other directives. Otherwise use link."

这是使用 link 函数的有效 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;
  }
}

Answer 2

如您所见，bindToController 绑定在控制器的构造函数中不会立即可用（与 $scope 不同，后者是）。您正在寻找的是 Angular 1.5 引入的功能：Lifecycle Hooks，特别是 $onInit.

你的想法是对的；只需按如下方式替换您的 init 函数定义和调用：

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

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

AngularJS 指令绑定到控制器

AngularJS Directive binding to controller

javascript

angularjs

angularjs-directive

angularjs-bindings