当前位置: 首页 > 面试题库 >

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

桑璞
2023-03-14
问题内容

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

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

<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) {
          ...
        }
    },
    ...
  };
});

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


问题答案:

我建议您通过辅助指令的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");
    }

  };
});


 类似资料:
  • 问题内容: 我为对话框编写了一个指令(myPopup),并为拖动该对话框编写了另一个指令(myDraggable),但是我总是收到错误消息: 多个指令[myPopup,myDraggable]要求新的/隔离的范围 这是一个柱塞:http ://plnkr.co/edit/kMQ0hK5RnVw5xOBdDq5P?p=preview 我能做什么? JS代码: 问题答案: 从文档: 应用于同一元素的多

  • 那么,的目的是什么?不能访问通过传递的所有属性。为什么一个max的访问值不能作为而不是 为什么要像那样分配回来? 谢了。

  • 问题内容: 我有多个具有相似构建步骤的项目,并且我正在研究在这些项目中重用Jenkinsfile管道。我很难找到有关如何实现这样的标准(我认为)设置的文档。 这是我的要求: 1)Jenkinsfile存储在回购中,在多个项目之间共享 2)每个项目都有其自己的参数:项目在仓库中的位置。 3)至少从用户角度来看,每个项目在Jenkins中都应独立,这意味着,例如,执行和日志可在Jenkins中的每个项

  • 问题内容: 请在这里查看示例 角需要,,以在所述分离的范围对象从父范围访问它来限定。 在这里使用 那么,目的是什么?无法访问通过传递的所有属性。为什么不能将max的一个访问值代替 为什么要分配回来像? 由于此应用程序是由Angular作者编写的,因此我希望有一个理由。 谢谢。 问题答案: attrs的目的是什么? 在与指令相同的元素上定义的属性有几个用途: 它们是将信息传递到使用隔离范围的指令的唯

  • 所以我的处境很棘手:我有一个外部的包装器,它包含一个内部的和一个,如下所示: 必须绝对定位在的正下方,但不能在页面出现和消失时移动它和其他元素。 因为它是绝对定位的,如果我在周围添加一个边框,它只在周围。问题是,我需要一个阴影,可以无缝地围绕两个元素。 我在搜索google/stackoverflow时遇到的三种解决方案是: > 给这两个元素赋予它们自己的阴影,然后使用去除上的顶部阴影,使其看起来