javascript - 将angularjs指令添加到本地html元素(输入文本，div，span等)？

我有这样的东西-

<input type="text" value="" title="Title"> ...

如何将自定义指令作为属性添加到页面上现有的html元素中，比如说-指令为categoryLookup-

<input type="text" value="" title="Title" category-lookup> ...

我需要在页面加载时动态地执行此操作，即使输入文本按照指令逻辑运行。

提前致谢。

最佳答案

您可以在定位元素之后利用$compile来实现此目的。我在此示例中添加了id并使用了香草JS，但您可能有更多可用的选择，例如jQuery的。拥有元素之后，只需在关联的控制器中$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生态系统中，但是确实存在这样的观念，即您甚至没有控制器，需要以某种方式挑选该指令并在“加载”时进行编译。这是一个具体的示例，但是，通常如何将其视为不好的做法，因此最好在关联的控制器中利用上述逻辑。注意以下几点...

<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-演示-无控制器