本文参考自后补全的代码：http://blog.csdn.net/liwusen/article/details/52078435
<body ng-app="myapp">
<h1>动态编译指令，动态编译指令模板内容</h1>
<div class="container" ng-controller="MyController">
<button ng-click="addDirective()">添加动态指令</button>
<div id="root"></div>
</div>
<!-- my-text method-from-outer="methodInCtrl()"></my-text -->
<script type="application/javascript">
angular.module('myapp', [])
.directive('myText', function ($compile) {
var templatecC = '<div ng-click="hello()">Hi everyone</div>';
return {
restrict: 'AE',
template: templatecC,
scope: {
hello: "&methodFromOuter"
},
link: function (scope, ele, attr) {
ele.on("click", function () {
scope.$apply(function () {
//使用指令的scope进行编译模板内容，并添加到当前指令下面
var content = $compile(templatecC)(scope);
ele.append(content);
})
});
}
}
})
.controller("MyController", ["$scope", "$compile", function ($scope, $compile) {
$scope.addDirective = function () {
//使用controller的$scope进行编译指令，添加到指定的元素下。
var dynamicDirective = $compile("<my-text></my-text>")($scope);
angular.element("div#root").append(dynamicDirective);
}
$scope.methodInCtrl = function () {
alert("hello 123456");
}
}])
</script>
</body>
相关推荐
**AngularJS ng-sorttable** 是一个用于AngularJS应用的表格排序插件，它允许用户对数据表格中的列进行动态排序，提升用户体验并便于数据管理。这个插件是基于AngularJS的`ng-repeat`指令和`ng-click`事件来实现功能...
compile函数用于编译指令模板，而link函数用于将模板和作用域连接起来，用于监视作用域属性的变化、注册事件监听器、操作DOM等。 在Angular.JS的开发过程中，熟练运用指令引用template和将指令当做属性使用是提高...
通过创建自定义指令，我们可以实现特定的功能或组件，如在本例中制作一个动态高亮当前选中菜单项的菜单。下面将详细介绍如何使用AngularJS Directive来实现这个功能。 首先，让我们分析一下提供的代码片段。`...
（1）一如既往的我还是使用了requireJS进行js代码的编译 （2）必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css…. 首先抛出几个问题： a）:何时回用到分页 (当后端返回的数据过多，一页装不满时，...
在指令方面，除了基础用法，还可能涉及指令的编译和链接过程、属性绑定、以及如何编写复杂的自定义指令。关于$scope，它是连接控制器和视图的桥梁，理解其工作方式对于调试和优化应用至关重要。 两本书都可能包含...
AngularJS内容管理系统带有自定义... 编译站点加载和指令时，它们将调用内容服务并检索JSON，并将响应设置为数据模型。 内容以类似方式在CMS中维护。 表单输入与发送到PHP服务的模型绑定，该服务更新数据库中的内容。