2016-11-17 64 views
0

是否有使用属性的值,并用它在指令模板将指令属性连接到模板?

<text-input txt-info="textName" ng-model="pi.medRecNumber"> </text-input> 

hcare.directive('textInput', function() { 
return { 
    restrict: 'AE', //attribute or element 
    scope: { 
     bindedModel: "=ngModel", // Element Model Data 
     txtInfo:'@', // Serve as name and id attribute value 
    }, 
    template: 
      '<div class="form-group tcell-220" data-ng-class="{true: \'has-error\'}[submitted && formHcare.'+txtInfo+'.$invalid]">'+ 
       '<div class="fg-line">' + 
        '<input id="'+txtInfo+'" name="'+txtInfo+'" data-ng-model="bindedModel" type="text" class="input-h25 form-control" placeholder="M#####-#" >'+ 
       '</div>'+ 
       '<small class="help-block" data-ng-show="submitted && formHcare.'+txtInfo+'.$error.required">Field Required</small>'+ 
      '</div>', 
    replace: true, 
    require: '?ngModel', 
    link: function($scope, elem){ 
     // LOGIC HERE 
    } 
}; 

})来连接一个可能的方式;

回答

0

我觉得我的工作.. 指令的事情是,你有相同的范围作为父母,所以你不真的需要'bindedModel'变量,你可以用{{}的txtInfo属性, }正如我们总是以角度做的那样。

这里是我的修正你的代码,使其工作:

hcare.directive('textInput', function() { 
    return { 
    restrict: 'AE', //attribute or element 
    replace: true, 
    scope: { 
     //bindedModel: "=ngModel", // Element Model Data 
     txtInfo:'@', // Serve as name and id attribute value 
    }, 
    template: 
    '<div class="form-group tcell-220" data-ng-class="{true: \'has-error\'}[submitted && formHcare.{{txtInfo}}.$invalid]">'+ 
    '<div class="fg-line">' + 
    '<input id="{{txtInfo}}" name="{{txtInfo}}" data-ng-model="pi.medRecNumber" type="text" class="input-h25 form-control" placeholder="M#####-#" >'+ 
    '</div>'+ 
    '<small class="help-block" data-ng-show="submitted && formHcare.{{txtInfo}}.$error.required">Field Required</small>'+ 
    '</div>', 
    //require: '?ngModel', 
    link: function($scope, elem){ 
     // LOGIC HERE 
    } 
    }; 
}); 

不要忘了初始化PI对象控制器,它的工作:

hcare.controller('AppCtrl', function($scope) { 
    $scope.pi = {}; 
}); 

如果你想为了确保它正在工作,您应该在此输入字段上使用浏览器的检查元素选项。