10

入力要素があり、カスタム ディレクティブを使用して ngModel と ngClass をそれにバインドしたいのですが、いくつかの問題があります。

私が持っているもの：

<input type="text" myDirective="PropertyFromScope" />

結果として欲しいもの：

<input type="text" ng-model="PropertyFromScope" ng-class="{'class' : MethodFromScope}" />

ディレクティブを任意の入力タグで機能させたいので、テンプレートの使用を避けようとしています。

これが私がこれまでに得たものです：

angular.module('customDirectives', [])
.directive('myDirective', function () {
    var linker = function (scope, element, attrs) {
        attrs.$set('ngModel', attrs.myDirective);
        attrs.$set('ngClass', '{\'class\' : MethodFromScope}');
    }
    return {
        restrict: 'A',        
        link: linker
    }
});

ここに JSFiddle があります: http://jsfiddle.net/Q8QJJ/

4

3 に答える 3

12

これを達成しようとしていますか？

非常に簡単な解決策：

myApp.directive('myDirective', function ($compile) {
    return {
        restrict: 'A',        
        compile: function(element, attrs) {
            element.attr('ng-model', attrs.myDirective);
            element.removeAttr("my-directive");
            element.attr('ng-class', '{\'class\' : testFunction()}');
            return {
               pre: function preLink(scope, iElement, iAttrs, controller) { },
               post: function postLink(scope, iElement, iAttrs, controller) { 
                 $compile(iElement)(scope);
               }
            }
        }
    }
});

ここにフィドルがありますhttp://jsfiddle.net/V9e9M/

于 2013-07-01T14:19:23.490 に答える
1

同様の問題でこのページにたどり着き、ngModel をカスタム ディレクティブにバインドしました。質問は数年前のものですが、私の解決策が他の人に役立つかもしれません。

まず、index.html で、いくつかの属性を作成したカスタム ディレクティブを使用しています。html のダッシュケースに注意してください。属性値は、ディレクティブで使用したいものです。

index.html

<div>
    <form name="userInfo">
        <my-custom-directive for-model="ctrl.userInput"
                             for-label="Enter User Info"
                             for-other="more info for the directive">
        <my-custom-directive>
    </form>
</div>
// check to see the binding.
{{ ctrl.userInput }}

次に、partial.html にいくつかのデフォルト値を設定して、ディレクティブが適切に機能しているかどうか、およびデフォルト値が表示されているかどうかを確認します。

partial.html

<div class="form-group">
    <label>blankLabel</label>
    <input type="text"
           class="form-control"
           ng-model="modelBlank">
</div>

ディレクティブには、おそらく最も一般的な問題であるいくつかの異なる構文が必要です。複数の属性を割り当てる可能性が高いため、変数を定義するのが好きです。次に、変数に対して .attr() を呼び出し、適用する新しい情報を渡します。この場合、文字どおり「ng-model」と、index.html で設定されたカスタム属性の値です。

directive.js

.directive('myCustomDirective', function () {
    return {
        templateUrl: 'partial.html',
        compile: function (element, attributes) {
            // Find the right element in the partial and assign a variable
            var inputTag = element.find('input');
            // use .attr() on the variable and pass it two arguments.
            inputTag.attr('ng-model', attributes.forModel);
            // Find a different element in the partial and replace the text.
            var labelTag = element.find('label');
            labelTag.html(attributes.forLabel);
        }
    };
})

console.log(element) を使用できますが、多くの情報が生成されます。ページがロードされたら要素を調べて、カスタム値に設定された ng-model を確認することをお勧めします。正しく接続されている場合、index.html ページの {{ ctrl.userInput }} には、フォームに入力されたテキストが表示されます。

これは大変な作業ですが、渡されたさまざまな情報で myCustomDirective を再利用できるようになりました。

<my-custom-directive for-model="ctrl.userName"
                     for-label="Enter Your Name:"
                     for-other="more info for the directive">
<my-custom-directive>
<my-custom-directive for-model="ctrl.userSelection"
                     for-label="Make a selection:"
                     for-other="more info for the directive">
<my-custom-directive>

個人的には、uib-typeahead などを含め、この方法で属性や角度ディレクティブを追加する際に問題が発生したことはありません。html と javascript の構文の違いに注意してください。

于 2016-02-14T18:16:19.047 に答える