一个元素的多个指令可以共享一个隔离范围吗？

小编典典

一个元素的多个指令可以共享一个隔离范围吗？

angularjs

同一元素上的两个指令不能都具有隔离的作用域，但是它们都可以使用与其父对象隔离的相同的作用域吗？它们都可以使用绑定到隔离范围的属性吗？

例如，如果我对一个元素有两个指令

<e-directive a-directive prop="parentProp"/>

一个指令定义了一个具有绑定属性的隔离范围

App.directive('eDirective', function() {
  return {
    restrict: 'E',
    scope: {
      localProp: '=prop'
    },
    ...
  };
});

另一个指令是否获得该范围，并且可以使用bound属性吗？

App.directive('aDirective', function() {
  return {
    restrict: 'A',
    link: function postLink(scope, element, attrs) {
        scope.$watch('localProp', function(newProp, oldProp) {
          ...
        }
    },
    ...
  };
});

我的最初尝试（与上面的编码差不多）失败了。

阅读 237

2020-07-04

共1个答案

小编典典

我建议您通过辅助指令的require属性利用指令之间的通信。第一个指令（e指令）保存隔离的作用域，而第二个辅助指令（a指令）具有对第一个指令的引用，并通过在第一个指令上定义的函数设置属性。一个小例子是（请参阅punker）：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div e-directive config="parentConfig" a-directive></div>
  </body>

</html>

和javascript：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.parentConfig = {};
});

app.controller('ECtrl', function ( $scope ) {
  this.setProp = function(newProp){$scope.config.prop = newProp;};

  $scope.$watch('config', function(newProp, oldProp) {
    console.log(oldProp, newProp);
  });
});

app.directive('eDirective', function() {
  return {
    restrict: 'A',
    scope: {
      config: '='
    },
    controller: 'ECtrl',
    link: function(scope, element, attrs) {
      scope.config.prop ="abc";
    }
  };
});

app.directive('aDirective', function() {
  return {
    restrict: 'A',
    require: 'eDirective',
    link: function(scope, element, attrs,ctrl) {
        ctrl.setProp("def");
    }

  };
});

2020-07-04