动态添加、链接和呈现指令
Dynamically add, link and render a directive
我的标记中有一个标记元素popup-window
,我用相应的指令处理它。如果我想在不同的地方显示或隐藏更多这样的小部件,我现在需要将所有这些元素放在我的页面标记中,我不确定这些元素看起来是否干净,这是最好的方法。看起来是这样的:
<popup-window></popup-window>
<details-window></details-window>
<share-widget></share-widget>
<twitter-stream></twitter-stream>
是否可以对我在DOM中动态添加的元素动态运行指令?我想把标记弄清楚。
您可以使用$compile服务编译包含指令的模板,并将其附加到页面中。也就是说,如果你不想添加<twitter-stream></twitter-stream>
,直到有人点击"添加推特流"按钮,你可以这样做:
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function($scope){
}]);
myApp.directive('twitterStream', function() {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
elem.append('<p>A tweet: ' + Math.random() + '</p>')
}
}
});
myApp.directive('createTwitterStreamButton', ['$compile', function($compile) {
return {
restrict: 'E',
template: '<button ng-click="add()">Add twitter stream</button>',
replace: true,
link: function(scope, elem, attrs) {
scope.add = function() {
var directiveElement = $compile('<twitter-stream></twitter-stream>')(scope);
directiveElement.insertAfter(elem);
}
}
}
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<create-twitter-stream-button></create-twitter-stream-button>
</body>
</html>
相关文章:
- mouseover和mouseleave文本颜色更改在指令链接中不起作用
- 如何在指令链接函数中使用从控制器传递的筛选器
- 从指令链接函数监视控制器作用域
- AngularJs:无法调用由子模块中的指令链接的函数
- Angularjs指令链接调用ng-click中的函数
- 指令链接中的绑定不起作用
- 如何在指令链接中定义的事件上测试$
- 在指令链接中访问 ngModel 的父对象
- 指令链接中的范围变量不会更新到指令控制器使用 Angular 读取它时
- 表单操作无法正常工作.它不会移动到指令链接,即<表单 action=“”>
- 如何从指令链接内部为选择框设置选定值
- 角度指令链接函数中的范围是否与角度指令控制器中的$scope相同
- 从指令链接传递范围变量
- 指令“链接”不适用,如我所愿
- AngularJS 指令 - 链接函数元素参数在监视函数中不可用
- 如何将$q传递到角度指令链接函数
- 点击没有命中angularjs指令链接函数的元素
- AngularJS -指令链接函数不会在元素从另一个指令创建后触发
- 从指令链接函数内部访问ng-model
- 将值从指令链接函数传递给控制器