Question

我对CanJS非常熟悉，有点像你可以在HTML元素上实例化自定义Web小部件的想法，现在我们有了一个对象，我们可以向它发送消息（在它上面调用一个方法）：

lightbox.popUp();

或

reviewStars.setStars(3.5);

如何在AngularJS中完成？在制定指令并将其设置在HTML元素上或将指令用作HTML元素之后，如何执行上述操作，如在OOP中，或者Smalltalk如何执行此操作 - 将消息发送到特定对象？

我可以想到一种方式，例如：

<review-stars api="ctrl.reviewStarAPI"></review-stars>

然后对于reviewStar指令，请执行以下操作：

scope: { api: "=" }
link: function(scope, elem, attrs) {
    // first define some functions
    scope.setStars = function(n) { ... };

    // and then set it to the api object:
    scope.api.setStars = scope.setStars();
}

然后在控制器中，执行

vm.reviewStarAPI.setStars(3.5);

但这有点凌乱，有点特别。它总是需要一个控制器...虽然，我想我们可以使用1个控制器作为主程序并实例化一堆对象，然后以这种方式调用它们。

除了上述方法之外，有什么方法可以实现这一目标？

Answer 1

这种模块化方法是创建一个名为reviewStars的指令。该指令应该有一个参数，表明星级。

例如： <review-stars rating="3.5">

您可以使用以下内容创建：

angular.module('myAngularModule', [])
.directive('reviewStars', function() {
  return {
    restrict: 'E',
    scope: {},
    bindToController: {
      rating: '@'
    },
    link: function(scope, elem, attrs) {
      // instantiate the lightbox code here
    },
    controller: function () {
      var vm = this;
      // controller code goes here (e.g. the onClick event handler)
    },
    controllerAs: 'ctrl',
    templateUrl: 'review-stars.html' // the HTML code goes in this file
  };
});

查看Rangle的ng-course（https://github.com/rangle/ngcourse）或Angular docs（docs.angularjs.org）以获取有关指令的更多信息。

在AngularJS中，如何将指令作为对象，以便您可以“向其传递消息”（在其上调用方法）？

1 个答案: