直接從form.FormController訪問表單元素？

Question

我正在處理幾個組件（指令）以幫助進行表單驗證。我希望組件知道相關輸入元素的狀態（如需要）。例如...

標記：

<form name="editUser"> 
    <control-label input="editUser.name">Name</control-label> 
    <input type="text" name="name" ng-model="user.name" required/> 
</form> 

指令：

app.directive("controlLabel", function() { 
    return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    scope: { 
     input: "=input" 
    }, 
    template: 
     '<label class="control-label">'+ 
     '<span ng-transclude>{{label}}</span>'+ 
     '<span ng-if="input.required"> (required!)</span>'+ // doesn't work? 
     '</label>' 
    }; 
}); 

輸出：

<form name="editUser"> 
    <label> 
     <span>Name</span> 
     <span>(required!)</span> 
    </label> 
    <input type="text" name="name" ng-model="user.name" required/> 
</form> 

源因爲form.FormController讓我相信這是不可能的。有什麼辦法可以至少訪問元素上的attrs？我想過使用裝飾器，但到目前爲止，我還沒有弄清楚如何完成這件事。

Answer 1

您應該使用input.$validators.required代替input.required爲：

myApp.directive("controlLabel", function() { 
    return { 
    restrict: "E", 
    replace: true, 
    transclude: true, 
    scope: { 
     input: "=input" 
    }, 
    template: 
     '<label class="control-label">'+ 
     '<span ng-transclude>{{label}}</span>'+ 
     '<span ng-if="input.$validators.required"> (required!)</span>'+ 
     '</label>' 
    }; 
}); 

Working Demo

Answer 2

首先，您的代碼存在錯誤。如果您使用的是transclude，則必須在您的指令中聲明它，否則會出現錯誤。

至於你的問題，在一個指令中，你可以訪問DOM元素。而對於這個特殊的使用情況下，你甚至可以在沒有所有的人創造孤立的範圍或附加屬性獲得通過：

app.directive("controlLabel", function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope: true,  // if needed, can also use empty isolated scope { } 
     transclude: true, // must declare this 
     template: 
       '<label class="control-label">' + 
       '<span ng-transclude>{{label}}</span>' + 
       '<span ng-if="show"> (required!)</span>' + 
       '</label>', 
     link: function(scope, jqElem, attrs) { 
      // check if next sibling of this directive is required 
      scope.show = (jqElem.next().attr("required") === 'required'); 
     } 
    }; 
}); 

現在你的控制標籤實在是最小的，並且DRY，邏輯是指令中以及封裝。唯一的要求是，你directive目標必須在標籤的下一個兄弟：

<control-label>Name</control-label> 
<input type="text" name="name" ng-model="user.name" required/> 

當然，如果需要的話，你可以用你的jquery-FU改變link功能，以滿足您的其他要求。