如何將求值傳遞給自定義元素指令？

Question

我有一個帶有以下模板的自定義元素指令：

<div>
   <input value="{{dataFromRootScope}}" />
</div>

和定義：

dirModule.directive('myDirective', function() {
        return {
            restrict: 'E',            
            templateUrl: '/Scripts/app/directives/myDirective.html'     
        };
    }
);

我想使用如下所示的指令：

<my-directive my-value="{{dataFromScope}}"></my-directive>

即我想在我的自定義指令中使用評估后的dataFromScope值作為dataFromRootScope 。 我怎樣才能做到這一點？

Answer 1

您可以使用隔離范圍雙向綁定：

dirModule.directive('myDirective', function() {
    return {
        scope: {
            model: '=myValue'
        },
        restrict: 'E',
        templateUrl: '/Scripts/app/directives/myDirective.html'
    };
});

指令模板在哪里

<div>
   <input ng-model="model" />
</div>

和用法是

<my-directive my-value="dataFromScope"></my-directive>

演示： http ： //plnkr.co/edit/Npiq2hCO4tQHmakG4IAe？p = preview

Answer 2

我想在我的自定義指令中使用評估后的dataFromScope值作為dataFromRootScope。 我怎樣才能做到這一點？

好吧，您有兩種選擇可以實現此目的。

選項1 ：為您的指令創建隔離范圍

這樣，您將需要從myValue分配dataFromRootScope值。 =運算符確保雙向綁定。

app.directive('myDirective', function() {
        return {
            restrict: 'E',
            scope:{
               dataFromRootScope: '=myValue'
            },
            templateUrl: 'myDirective.html'
        };
    }
);

“ dataFromScope”在myDirective中將不可用，因為它具有隔離的范圍。 您可以通過dataFromRootScope訪問它（查看其如何從myValue獲取其值）

<div>
   <input value="{{dataFromRootScope}}" />
</div>

演示-1

選項2 ：享受共享范圍。

在這種情況下，您無需創建隔離范圍。 您可以簡單地在指令模板中使用dataFromScope ，或者，如果您確實希望在模板中以dataFromRootScope訪問它，只需在鏈接函數中對其進行分配。

app.directive('myDirective', function() {
        return {
            restrict: 'E',
            templateUrl: 'myDirective.html',
            link:function(scope,ele,attr){
              scope.dataFromRootScope = scope.dataFromScope
            }
        };
    }
);

<div>
   <input value="{{dataFromRootScope}}" />
</div>

演示-2

Answer 3

您可以使用“ @”符號：

dirModule.directive('myDirective', function() {
    return {
        scope: { myValue: '@' },
        restrict: 'E',            
        templateUrl: '/Scripts/app/directives/myDirective.html'     
    };
});

“ @”符號將DOM屬性的評估值綁定到指令。

然后，您可以按照要求使用指令：

<my-directive my-value="{{dataFromScope}}"></my-directive>