1

我打破了我的头试图解决这个问题。假设我有这个自定义指令：

app.directive("selectInput",function($compile){
return {
    restrict: "E",
    templateUrl: 'js/angular-app/test.html',
    scope: {                
        formName:'=',
        inputName:"=",
        nameInput: "@",
        ngModel: "=",
    },
    transclude: true,
    replace: true,
    link: function(scope, element, attrs, ctrl) {   
        ...             
    },
}});

这是我的templateurl test.html

<div
class="form-group"
ng-class="{'has-error has-feedback': formName.inputName.$invalid}"> 
<input type="text" name="{{nameInput}}" ng-model="ngModel"/></div>

和电话

<form name="form" class="simple-form" novalidate>
<select-input 
    form-name="form"                       
    input-name="fClase"            
    name-input="fClase"
    ng-model="inputmodel">
</select-input></form>

问题出在 test.html 模板中，表达式formName.inputName.$invalid不起作用，我尝试{{formName}}.{{inputName}}.$invalid并没有，我也尝试更改指令定义中的参数&, @ ... =?。

我无法合并此表达式，感谢您的帮助。

更新，解决问题（感谢 Joe Enzminger）：

最后，我通过以下方式更改指令：

app.directive("selectInput",function($compile){
return {
    restrict: "E",
    templateUrl: 'js/angular-app/test.html',
    scope: {           
        inputName: "@",
        ngModel: "=",
    },
    require: ["^form"],
    replace: true,
    link: function(scope, element, attrs, ctrl) {  
        scope.form = ctrl[0]; 
        ...             
    },
}});

注意表单 attr 为 ctrl。

模板 test.html

<div
class="form-group"
ng-class="{'has-error has-feedback': form[inputName].$invalid}"> 
<input type="text" name="{{nameInput}}" ng-model="ngModel"/></div>

这里formName.inputName.$invalid改变form[inputName].$invalid

最后打电话

<form name="form" class="simple-form" novalidate>
<select-input        
    input-name="fClase"   
    ng-model="inputmodel">
</select-input></form>

我希望有用

4

1 回答 1

1

这是一个替代实现，可以阐明事情的实际工作方式。

变化：

不要注入 $compile （你不使用它）

没有嵌入：真（你没有使用嵌入）

范围：{} - 我们创建一个空的隔离范围，以便我们的模板可以工作，并且我们可以将指令范围与父范围隔离。

require: ["ngModel", "^form"] - 我们想在元素上要求 ngModel 并要求元素嵌入到表单中。这些将传递给链接函数 ctrl 参数。

<div
class="form-group"
ng-class="{'has-error has-feedback': form[model.$name].$invalid}"> 
<input type="text" ng-model="model.$modelValue"/></div>

<form name="form" class="simple-form" novalidate>
<select-input 
    ng-model="inputmodel">
</select-input></form>

app.directive("selectInput",function(){
return {
    restrict: "E",
    templateUrl: 'js/angular-app/test.html',
    scope: {},
    replace: true,
    require: ["ngModel", "^form"],
    link: function(scope, element, attrs, ctrl) {  
        //give our directive scope access to the model and form controllers
        $scope.model = ctrl[0];
        $scope.form = ctrl[1];          
    },
}});
于 2015-02-09T01:42:25.147 回答