1

私はこのようなものを持っています -

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

ページ上の既存の html 要素にカスタム ディレクティブを属性として追加するにはどうすればよいですかcategoryLookup。

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

ページの読み込み時にこれを動的に行う必要があります。つまり、入力テキストをディレクティブ ロジックごとに動作させる必要があります。

前もって感謝します。

4

1 に答える 1

2

これは、要素をターゲットにした後に$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 リンク- デモ

また、「ページの読み込み時に動的に」とは、いくつかのことを意味します。完全に肉付けされた 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 リンク- デモ - コントローラなし

于 2015-09-24T15:57:37.757 に答える