我喜欢使用指令制作自定义组件。我检查了很多教程,它让我感到困惑,任何人都可以解释指令是如何工作的。我计划制作的组件是
<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>
这是您的指令,带有一些内嵌注释:
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 = // ...
});
View:
<shout-list shouts="myShouts"></shout-list>
希望这可以帮助!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)