在链接功能中设置范围属性

当我给我的指令指定一个独立的作用域时，用“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

在链接功能中设置范围属性

回答

相关问题