微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

<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");
    }

  };
});

原文地址:https://www.jb51.cc/angularjs/142638.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐