频道导航

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

2020-05-24 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 一个元素的多个伪指令可以共享隔离的范围吗？，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_502_0@ 同一元素上的两个指令不能同时具有隔离范围,但是它们都可以使用与其父代隔离的相同范围.他们都可以使用绑定到隔离范围的属性吗？

例如,如果我有一个元素的两个指令

<eDirective aDirective prop="parentProp"/>

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

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

其他指令是否获得该范围,并且可以使用绑定属性？

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

我的初始尝试(几乎编码如上)失败了.

我建议您通过辅助指令的require属性来使用指令控制器之间的通信.第一个指令(e-directive)保存隔离的作用域,而第二个helper指令(a-directive)具有对第一个伪指令的引用,并通过第一个伪指令定义的函数来设置属性.一个小样本将是( see plunker)：

<!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',oldProp) {
    console.log(oldProp,newProp);
  });
});

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

app.directive('aDirective',require: 'eDirective',attrs,ctrl) {
        ctrl.setProp("def");
    }

  };
});