Question

这是plunker。
HTML：

<body ng-app="app">
    <h1>selectable</h1>
    <selectable text="link1" status="true"></selectable>
    <selectable text="link2" status="false"></selectable>
    <p>
      link1 is <!--status of link1, true or false-->
    </p>
    <p>
      link2 is <!--status of link2, true or false-->
    </p>
  </body>

JS：

angular.module("app", [])
.directive("selectable", function(){
  return {
    restrict: "AE",
    replace: true,
    scope: {
      status: "=",
      text: "@"
    },
    link: function(scope, ele, attr){
      ele.on("click", function(){
        scope.status = !scope.status;
        scope.$apply();
      });
    },
    templateUrl: "./tmpl.html"
  }
})

模板：

<span class='myLink' ng-class='{"active": status, "": !status}'>
  {{text}}
  {{status}}
</span>

如何获取link1和link2的状态然后显示出来？
谢谢！

Answer 1

使用ng-controller指令

<body ng-app="app" ng-controller="MainCtrl">

在MainCtrl函数内部定义了两个变量来表示两个链接的状态，

.controller('MainCtrl', function($scope) {
    $scope.link_1_status = true;
    $scope.link_2_status = false;
})

将这两个变量绑定到指令范围的status变量

<selectable text="link1" status="link_1_status"></selectable>
<selectable text="link2" status="link_2_status"></selectable>

并将状态打印为，

<p>
    link1 is {{link1Bool}}
</p>
<p>
    link2 is {{link2Bool}}
</p>

这是PLUNKER

或如果您不想使用ng-controller，请使用ng-init

<body ng-app="app" ng-init="link_1_status = true; link_2_status = false">
....
    <selectable text="link1" status="link_1_status"></selectable>
    <selectable text="link2" status="link_2_status"></selectable>    
....
</body>

这是PLUNKER

<强> WHY

如果您使用<selectable text="link1" status="true"></selectable>，那么您将true分配给指令范围status变量，当您点击它时会切换值，但您无法访问该值因为你没有引用该值（你只是传递没有参考或识别的原始值），所以你需要一个参考来访问那个变量，这就是为什么我们需要一些东西link_1_status＆amp; link_2_status可以访问该属性。

Answer 2

您需要在某个范围变量中包含该值并将其传递给指令attribute，因为您已经使用=（双向绑定）angular将显示绑定的魔力。如果传递给isolated指令的值将发生变化，那么它将改变它传递的基础scope值。反之亦然。

<强>标记

<body ng-app="app">
    <h1>selectable</h1>
    <selectable text="link1" status="link1Bool"></selectable>
    <selectable text="link2" status="link2Bool"></selectable>
    <p>
      link1 is {{link1Bool}}
    </p>
    <p>
      link2 is {{link2Bool}}
    </p>
</body>

Demo Here

Answer 3

这是plunker。

我认为正确的方法是拥有一个控制器，并使用他在表单之间共享数据并添加一些逻辑来处理数据。

.controller("ctrl", function($scope){
  $scope.firstStatus = true;
  $scope.secondStatus = false;
})

和基本控制器代码：

{{1}}

如何从Angular中获取外部指令的价值？

3 个答案: