將指令屬性連接到模板？

Question

是否有使用屬性的值，並用它在指令模板

<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 
    } 
}; 

}）來連接一個可能的方式;

Answer 1

我覺得我的工作.. 指令的事情是，你有相同的範圍作爲父母，所以你不真的需要'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 = {}; 
}); 

如果你想爲了確保它正在工作，您應該在此輸入字段上使用瀏覽器的檢查元素選項。