angularjs - Passing ng-model in nested directives

Question

I want to pass my ng-model from the 'outer-directive' to an 'inner-diretive' (which is contained in the outer-directive template).

What is the correct way for doing it?

HTML code:

<body>
    <outer-directive ng-model="prop" />
</body>

and directive code:

angular.module('app', []).directive('outerDirective', function(){
    return {
        template: '<inner-directive ng-model="prop" />',
        link: function() { ... }
    }
});

score 45 · Accepted Answer

您可以使用属性中的变量设置双向绑定（参见文档ngModel，“指令定义对象”部分），与任何其他指令一样：

<my-directive ng-model="foo"></my-directive>

myApp.directive('myDirective', function () {
    return {
        template: '<div><input type="text" ng-model="ngModel" /></div>',
        replace: true,
        scope: {
            ngModel : '=',
        },
    };
});

Fiddle

score 0 · Accepted Answer

我认为您需要在指令中传递表单并手动将表单设置为脏。

<directive directive-form="editForm" ></directive>

scope: {
 directiveForm:"="
 },
 link: function (scope, $elem, $attrs){
  scope.directiveForm.$setDirty(); 
 }

angularjs - Passing ng-model in nested directives

2 回答 2

Related

Reference