如何在angularjs中编写指令

时间:2013-01-31 07:26:40

标签: angularjs angularjs-directive

我想使用指令制作自定义组件。我检查了很多教程,让我感到困惑,任何人都可以解释指令是如何工作的。我计划制作的组件是

<shout-list></shout-list>

喊叫列表的模板将是这样的

<div class="shout" ng-repeat="shout in shouts">
    <p>{{shout.message}}</p>
    <img src="media/images/delete.png" width="32" height="32" ng-click="deleteShout({{$index}},'{{shout._id}}')"/>
</div> 

1 个答案:

答案 0 :(得分:16)

这是你的指令,带有一些内联注释:

angular.module( 'directives', [] ).directive( 'shoutList', function () {
  return {
    restrict: 'E', // allow as an element; the default is only an attribute
    scope: {       // create an isolate scope
      shouts: '='  // map the var in the shouts attribute to this scope
    },
    templateUrl: 'templates/shoutList.html', // load the template file
    controller: function ( $scope ) {
      // we declare a your function for use in the view
      $scope.deleteShout = function ( idx, id ) {
        // do whatever
      };
    }
  };
});

模板文件:

<div class="shout" ng-repeat="shout in shouts">
  <p>{{shout.message}}</p>
  <img src="media/images/delete.png" width="32" height="32" 
    ng-click="deleteShout({{$index}},'{{shout._id}}')" />
</div> 

现在您可以在代码中使用它,如下所示:

控制器:

.controller( 'MainCtrl', function ( $scope ) {
  $scope.myShouts = // ...
});

查看:

<shout-list shouts="myShouts"></shout-list>

希望这有帮助!