Question

我有两个指令，下拉列表和面板。

面板包含下拉列表。使用require：“^ panel”，并指定一个控制器，我可以进行通信。

你可以在这里看到一个例子

http://plnkr.co/edit/rqBsZ26JiQKzFMRpBmKD?p=preview

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
  <script>
    angular
      .module("app", [])
      .controller("ctrl", function($scope) {
        $scope.test = "Welcome"
      })
      .directive("dropdown", function() {
        return {
          require: "^panel",
          constraint: "E",
          transclude: true,
          scope: {},
          template: "<div>{{selectedValue}}<select ng-model='selectedValue'><option>1</option><option>2</option></select></div>",
          link: function(scope, b, c, panelController) {
            scope.selectedValue = 1;

            scope.$watch('selectedValue', function(newVal, oldVal) {
              panelController.setValue2(newVal)
            })
          }
        }
      })
      .directive("panel", function() {
        return {
          constraint: "E",
          transclude: true,
          controller: function($scope) {
            this.setValue2 = function(val) {
              $scope.value2 = val;

              if (val == 1) {
                $scope.style1 = true;
                $scope.style2 = false;
              }

              if (val == 2) {
                $scope.style1 = !true;
                $scope.style2 = !false;
              }
            }
          },
          template: "<div ng-class='{panel: true, style1: style1, style2: style2}'><h2>Value: {{value2}}</h2><br><dropdown></dropdown></div>",
          scope: {},
          link: function(scope, b, c) {}
        }
      })
  </script>
</head>

<body ng-controller="ctrl">
  <h1>{{test}}</h1>
  <panel></panel>
  <panel></panel>
  <panel></panel>
</body>

</html>

我的问题是关于如何使下拉指令独立，所以我想要这两个：

1）dropdown指令单独工作，所以我可以放入我的html和 2）有时，在面板

等其他指令中

我原以为我可以生成返回的指令对象，如果需要，可以在需要时添加控制器提到的那个对象。

这是删除现在我在面板和下拉列表之间的紧耦合的正确方法，同时允许我在任何其他情况下仍然可以灵活地使用下拉列表吗？

请找到包含rahil建议的更新的plunkr，完全正常工作

http://plnkr.co/edit/rqBsZ26JiQKzFMRpBmKD?p=preview

指令通信和耦合

0 个答案: