我有这样的东西-
<input type="text" value="" title="Title"> ...
如何将我的自定义指令作为属性添加到页面上现有的 html 元素,比方说 - 指令作为 categoryLookup
-
<input type="text" value="" title="Title" category-lookup> ...
我需要在页面加载时动态执行此操作,即让输入文本按照指令逻辑运行。
提前致谢。
最佳答案
您可以利用 $compile 来做到这一点在定位您的元素之后。我在这个例子中添加了一个 id
并使用了 vanilla JS,但你可能有更多的东西供你使用,例如查询。拥有元素后,只需在关联的 Controller 中$compile
即可。观察以下示例...
<div ng-app="app" ng-controller="ctrl">
<input id="myInput" type="text" title="Title">
</div>
angular.module('app', [])
.controller('ctrl', function($scope, $compile) {
$compile(angular.element(document.getElementById('myInput')).attr('category-lookup', 'category-lookup'))($scope)
})
.directive('categoryLookup', function() {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
console.log('directive registered')
}
}
});
JSFiddle Link - 演示
此外,“动态加载页面”可能意味着一些事情。我假设您处于一个完全充实的 AngularJS 生态系统中,但确实存在您甚至没有 Controller 并且需要以某种方式挑选该指令并在“加载”时编译它的概念。这是一个具体的示例,您可以如何执行此操作,但它通常被认为是一种不好的做法,最好在关联的 Controller 中利用上述逻辑。观察以下...
<div ng-app="app">
<input id="myInput" type="text" value="" title="Title">
</div>
angular.element(document).ready(function () {
var $injector = angular.injector(['ng', 'app']);
$injector.invoke(function($rootScope, $compile) {
$compile(angular.element(document.getElementById('myInput')).attr('category-lookup', 'category-lookup'))($rootScope)
});
});
JSFiddle Link - 演示 - 无 Controller
关于javascript - 将 angularjs 指令添加到 native html 元素(输入文本、div、span 等)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32764937/