在鏈接功能中設置範圍屬性

當我給我的指令指定一個獨立的作用域時，用「scope：{}」替換「scope：false」，我需要做些什麼來使scope.test在我的HTML中可見？

我的指令：

angular 
    .module("MyApp", []) 
    .directive("myDir",() => { 
    return { 
     scope: false, 
     restrict: "A", 
     link: (scope, element) => { 
      scope.test = 'my test'; 
     } 
    }; 
    });

我的HTML：

<div ng-app="MyApp"> 
    <div my-dir>{{test}}</div> 
</div>

沒有控制器，只在我向鏈路功能。

來源

2017-10-08 Miki

似乎是爲我工作，見[這裏]（http://plnkr.co/edit/Lkx1RLf5neaLG0IaWAgm?p=preview），即使在[codepen（https://codepen.io/_miki_/pen/RLMKKV） –

謝謝Pankaj。讓我澄清一下;我的codepen與「scope：false」一起工作，但是當我給這個指令一個新的作用域時，設置「scope：{}」作用域變量在HTML中不再可見。 – Miki

使用獨立作用域的唯一方法是使用$ parent ref：'scope。$ parent.test ='my test';' – dfsq

之前它有工作，因爲你有scope: false（共享範圍）。

在您的情況下，添加scope: {}來指示屏幕上不會反映test值的變化。因爲當在指令中創建了獨立作用域scope: {}時，它會將scope綁定到指令template（如果存在）。在你的情況下，你的指令中沒有任何template。

如果你想看到的輸入值，你可以通過

或者使用$parent約定範圍一樣改變它。$ parent.test =「我的測試」
或轉移{{test}}指令模板，讓裏面的獨立作用域將被編譯爲指令模板。

來源

2017-10-08 18:20:36

基本單詞scope:false表示 - 指令從調用控件的位置開始採用相同的控制器範圍。

在另一方面scope:{}是分離範圍，它使用指令的內部範圍及其對指令模板僅實行

你可以嘗試用ng-transclude像玩：

<div my-dir>{{$parent.test}}</div>

和：

.directive("myDir",() => { 
    return { 
     scope: {}, 
     transclude: true, 
     restrict: "A", 
     template: '<div ng-transclude></div>', 
     link: (scope, element) => { 
      scope.test = 'my test'; 
     } 
    }; 
    });

Codepan Demo

來源

2017-10-08 18:22:59

在鏈接功能中設置範圍屬性

回答

相關問題