如何在自定义指令中合并表达式 Angularjs

Question

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

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) {   
        ...             
    },
}});

这是我的模板网址 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 as 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>

我希望有用

Answer 1

这是一个替代实现，可能会阐明实际工作原理。

变化：

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

无嵌入：true（您没有使用嵌入）

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

require: ["ngModel", "^form"] - 我们想要在元素上要求 ngModel 并要求元素嵌入到表单中。这些将传递给 link 函数 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];          
    },
}});

如何在自定义指令中合并表达式 Angularjs

How merge expressions in custom directives Angularjs

angularjs

angularjs-scope

angular-directive

angularjs-templates