1

我正在尝试找出 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;
    });
  }
}
4

2 回答 2

2

Angular 建议您“仅在您想将 API 公开给其他指令时才绑定控制器。否则使用链接。”

这是使用链接功能的工作小提琴。

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;
  }
}
于 2017-01-30T01:51:15.377 回答
2

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

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

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

这是你更新的小提琴。（或者，如果没有此解决方案，您将需要一个watch.）

于 2017-01-30T03:02:23.197 回答