将 angularjs 指令添加到原生 html 元素（输入文本、div、跨度等）？

Question

我有这样的东西 -

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

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

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

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

提前致谢。

Answer 1

您可以在定位您的元素后利用 $compile 来做到这一点。我在这个例子中添加了一个 id 并使用了 vanilla 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 - 演示

此外，"dynamically on page load" 可能意味着 一些事情。我假设您处于一个完全充实的 AngularJS 生态系统中，但确实存在您甚至没有控制器并且需要以某种方式挑选该指令并在 "load" 上编译它的概念。这是一个具体的示例，您可以如何执行此操作，但它通常被认为是一种不好的做法，最好在关联的控制器中利用上述逻辑。观察以下...

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

将 angularjs 指令添加到原生 html 元素（输入文本、div、跨度等）？

Add angularjs directive to a native html element (input text, div, span etc)?

html

javascript

angularjs

angularjs-directive

angularjs-compile