Question

我的页面上有一个指令。我将id属性分配给该指令。指令的实际作用并不重要。

关键是我现在想要一个基本上激活第一个指令的第二个指令。

这样的事情：

<body>
    <!-- bunch of elements -->
    <my-directive id="test"></my-directive>
    <!-- bunch of elements -->
    <controlling-directive directive-id="test"></controlling-directive>
</body>

controllingDirective的定义如下：

.directive('controllingDirective', function() {
    link: function(scope, elem, attrs) {
        element.on('click', function(){
            // call directive with attrs.directiveId
        });
    }
}

问题是：我如何实现这一目标以及最佳方式是什么？

我想到了两件事：

通过使用document.getElementById和angular.element（..）。isolateScope（）如下：

.directive('myDirective', function() {
    scope: {},
    link: function(scope, elem, attrs) {
        scope.actionToStart = function() {...};
    }
}


.directive('controllingDirective', function() {
    link: function(scope, elem, attrs) {
        element.on('click', function(){
            angular.element(document.getElementById(attrs.directiveId))
                    .isolateScope().actionToStart();
        });
    }
}

或者在$ rootScope上使用事件：

.directive('myDirective', function($rootScope) {
    scope: {},
    link: function(scope, elem, attrs) {
        $rootScope.$on(attrs.id + 'Start', function(){...});
    }
}


.directive('controllingDirective', function($rootScope) {
    link: function(scope, elem, attrs) {
        element.on('click', function(){
            $rootScope.$emit(attrs.directiveId + 'Start');
        });
    }
}

我不知道两种可能性。是否有一件我想念的简单事情，应该怎么做？

请注意，我无法使用＆＃39; require＆＃39; -option，因为指令与DOM无关。

Answer 1

你不需要使用 angular.element 甚至是事件，只需简单的手表和属性

var myApp = angular.module('myApp', [])

.directive('myDirective', function() {
  return {
    template: '{{cur}}',
    scope: {
      cur: '='
    },
    link: function(scope, elem, attrs) {
      if (!scope.cur) scope.cur = 1;
      scope.$watch(function() {
        return scope.cur;
      }, function(newVal, oldVal) {
        if (newVal !== oldVal) {
          if (oldVal == 4) scope.cur = 1;
        }
      });
    }
  };
}).directive('controllingDirective', function($rootScope) {
  return {
    scope: {
      directiveCur: '='
    },
    template: '<button type="button" ng-click="click()">Click me</button>',
    link: function(scope, elem, attrs) {
      scope.click = function() {
        scope.directiveCur += 1;
      }
    }
  };
});

div {
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="myApp">
  <div>
    <my-directive data-cur="test"></my-directive>
    <controlling-directive directive-cur="test"></controlling-directive>
  </div>
  <div>
    <my-directive data-cur="test2"></my-directive>
    <controlling-directive data-directive-cur="test2"></controlling-directive>
  </div>
</div>

$ rootScope 的

UPDATE 变体

var myApp = angular.module('myApp', []);
myApp.controller('Test', function($scope) {});

myApp.directive('myDirective', function($rootScope) {
  return {
    template: '{{test}}',
    scope: {
      cur: '@'
    },
    link: function(scope, elem, attrs) {

      if (!$rootScope[scope.cur]) scope.test = $rootScope[scope.cur] = 1;
      console.log($rootScope[scope.cur], scope.test);
      scope.$watch(function() {
        return $rootScope[scope.cur];
      }, function(newVal, oldVal) {
        if (newVal !== oldVal) {
          if (oldVal == 4) scope.test = $rootScope[scope.cur] = 1;
          else scope.test = $rootScope[scope.cur];
        }
      });
    }
  };
});


myApp.directive('controllingDirective', function($rootScope) {
  return {
    scope: {
      directiveCur: '@'
    },
    template: '<button type="button" ng-click="click()">Click me</button>',
    link: function(scope, elem, attrs) {
      scope.click = function() {
        $rootScope[scope.directiveCur] += 1;
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="myApp">
  <my-directive data-cur="test"></my-directive>
  <controlling-directive directive-cur="test"></controlling-directive>
  <br/>
  <my-directive data-cur="test2"></my-directive>
  <span ng-controller="Test">
    <controlling-directive data-directive-cur="test2"></controlling-directive>
  </span>
  <div>test: {{test}}
    <br/>test2: {{test2}}</div>
</div>

带工厂的

UPDATE2 变种

var myApp = angular.module('myApp', []);

myApp.factory('shared', function() {
  return {
    inc: function(cur) {
      if (this[cur] == 4) this[cur] = 1;
      else this[cur] += 1;
    }
  }
});
myApp.controller('Test', function($scope) {});

myApp.directive('myDirective', function(shared) {
  return {
    template: '{{shared[cur]}}',
    scope: {
      cur: '@'
    },
    link: function(scope, elem, attrs) {
      if (!shared[scope.cur]) shared[scope.cur] = 1;
      scope.shared = shared;
    }
  };
});


myApp.directive('controllingDirective', function(shared) {
  return {
    scope: {
      directiveCur: '@'
    },
    template: '<button type="button" ng-click="click()">Click me</button>',
    link: function(scope, elem, attrs) {
      scope.click = function() {
        shared.inc(scope.directiveCur);
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="myApp">
  <my-directive data-cur="test"></my-directive>
  <controlling-directive directive-cur="test"></controlling-directive>
  <br/>
  <my-directive data-cur="test2"></my-directive>
  <span ng-controller="Test">
    <controlling-directive data-directive-cur="test2"></controlling-directive>
  </span>
</div>

通过任意位置的按钮与角度指令交互

1 个答案: