Question

我有一个表单指令，它注入一些引导类并将ng-messages添加到表单中。一旦我升级到角度1.4它就会中断。

我能够找到这个方法的问题：

var setupDom = function ( element ) {
        var input = element.querySelector( 'input,textarea,select' );
        var label = element.querySelector( 'label' );
        var type = input.getAttribute( 'type' );
        var name = input.getAttribute( 'name' );
        //checkbox and radio need a different class
        if ( type !== 'checkbox' && type !== 'radio' ) {
            input.classList.add( 'form-control' );
        }
        element.classList.add( 'form-group' );
        return name;
    };

此代码运行的html元素如下所示：

<input type="url" name="{{'videoLink' + $index}}" id="{{'videoLink' + $index}}"
                       ng-model="item.videoLink" placeholder="Youtube or Vimeo video link"/>

问题发生在var name，因为它获得了非编译版本{{'videoLink' + $index}}而不是videoLink0，videoLink1 ......就像在1.3中一样。

知道为什么会这样，以及如何克服这个问题？

更新

这是整个指令代码：

'use strict';
(function ( module ) {
    var setupDom = function ( element, scope ) {
        var input = element.querySelector( 'input,textarea,select' );
        var label = element.querySelector( 'label' );
        var type = input.getAttribute( 'type' );

        var name = scope.$eval(input.getAttribute( 'name' ));
        //checkbox and radio need a different class
        if ( type !== 'checkbox' && type !== 'radio' ) {
            input.classList.add( 'form-control' );
        }
        element.classList.add( 'form-group' );
        return name;
    };
    var addMessages = function ( form , element , name , $compile , scope ) {
        var messages = '<div class="help-block am-fade-and-scale" ' + 'ng-messages=" ' + form.$name + '.' + name + '.$error' + '" ' + 'ng-show="' + form.$name + '.' + name + '.$dirty">' + '<div ng-messages-include="/assets/angular-client/app/html/common/forms/message.html"></div></div>';
        element.append( $compile( messages )( scope ) );
    };
    var watcherFor = function ( form , name ) {
        return function () {
            if ( name && form[ name ] ) {
                return form[ name ].$invalid;
            }
        };
    };
    var updaterFor = function ( element ) {
        return function ( hasError ) {
            if ( hasError ) {
                element.removeClass( 'vl-success' ).addClass( 'vl-error' );
            } else {
                element.removeClass( 'vl-error' ).addClass( 'vl-success' );
            }
        };
    };
    var link = function ( $compile ) {
        return function ( scope , element , attr , formCtrl ) {
            var name = setupDom( element[ 0 ] ,scope );
            addMessages( formCtrl , element , name , $compile , scope );
            scope.$watch( watcherFor( formCtrl , name ) , updaterFor( element ) );
        };
    };
    var forminput = /*ngInject*/
        function ( $compile ) {
            return {
                restrict : 'A' ,
                require :  '^form' ,
                link :     link( $compile )
            };
        };
    forminput.$inject = [ '$compile' ];
    module.directive( 'vlForminput' , forminput );
}( angular.module( 'html.common' ) ));

Answer 1

我遇到了同样的问题，并使用替换方法解决了这个问题。

<强> HTML：

<input type="text" ng-model="carrierBillingRateException.rate" name="rate{{$index}}" required />

Angular Directive：

var setupDOM = function (element, scope) {
    var input = element[0].querySelector("input, textarea, select");
    var type = input.getAttribute("type");
    var name = input.getAttribute("name").replace('{{$index}}', scope.$index);

    return name;
};

Answer 2

为什么不尝试使用以下内容：

var app = angular.module('html.common', []);
app.directive('vlFormInput', function () {
    return {
        restrict: 'EA',
        templateUrl: 'path/to/html/file/with/ng-repeat.html',
        link: {
        post: function(scope,elem,attr){
              scope.setUpDom = function(){
              var input = angular.element( 'input,textarea,select' );
              var label = angular.element( 'label' );
              var type = input.getAttribute( 'type' );
              var name = input.getAttribute( 'name' );
              }

         }    
       }
    };
});

老实说，我没有测试过这段代码，但它应该指向正确的方向。通过使用post：function，您可以在查找时编译这些值。

升级到Angular 1.4后，我的指令中断了

2 个答案: