0

使用 AngularJS 1.0.8，我正在尝试创建一些可重用的指令，以创建一个 Web 开发人员可以编写具有多个属性的单个“顶级”指令的情况，而该指令又具有一个模板，其中包含其他指令，它们本身可能包含其他指令等。

我遇到的问题是让“内部”模板知道顶级属性。我认为这将是一个普遍的问题，但从我的研究来看，没有其他人在问这个问题。

我创建了这个Plunker来显示问题：

<!DOCTYPE html>
<html ng-app="outerInnerDirectivesApp">
<head>
    <title>Outer/Inner Directives</title>
</head>
<body>
<div>Single level directive follows:</div>
<single-level-directive single-level-id="single123"></single-level-directive>
<div>Outer/inner directive follows (Expecting "outer123"):</div>
<outer-directive outer-id="outer123"></outer-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="directives.js"></script>
</body>
</html>

在Plunker，

  1. 单级指令有效，我认为是显示数据的标准方式。

  2. 外部指令和内部指令不起作用。

我期望这些会发生的是

(i) outerDirective 编译/链接以生成 html

<inner-directive inner-id="outer123"></inner-directive>

进而

(ii) innerDirective 编译/链接以生成 html

<div>outer123</div>

但是在步骤（ii）我得到

<inner-directive inner-id="" class="ng-isolate-scope ng-scope">
   <div class="ng-binding"></div>
</inner-directive>

所以innerDirective会生成一个空的div。

实际上，如果我将 external-template.html 更改为

<div>{{outerId}}<div>

然后该值正确显示，因此看起来 scope.outerId 在正确的位置可用，但 Angular 对我尝试以我现在的方式使用它并不满意。

这是期望 Angular 做的合理的事情吗？如果是这样，我错过了什么？如果不是，那么您认为从简单的指令集构建更复杂的屏幕的明智替代方法是什么？

4

2 回答 2

1

如果您要设计具有隔离范围的指令，我建议使用隔离范围来定义您要使用的属性类型：

outerInnerApp.directive("outerDirective", function() {
  return {
    restrict: "E",
    scope: {
      outerId: '@'
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: "outer-template.html"
  };
});
outerInnerApp.directive("innerDirective", function() {
  return {
    restrict: "E",
    scope: {
      innerId: '='
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: "inner-template.html"
  };
});

这是一个工作的plunker。

您的外部指令正在使用属性中定义的值。因此，要将值传递到隔离范围，我们可以使用@. 然后内部作用域通过绑定一个变量。所以，我们可以使用=来设置一个绑定属性。

于 2013-10-31T21:03:23.710 回答
0

对此有了更多的想法。更多地使用了 AngularJS，我不确定是否要绑定到范围（使用“=”）。事实上，我可以通过进行以下更改来让原始 Plunkr 工作：

outerInnerApp.directive("outerDirective", function() {
    return {
        restrict: "E",
        scope: {
        //add outerId here
        outerId: "@"
        },
    link: function(scope, element, attrs) {
        //remove scope assignment here
        //scope.outerId = attrs.outerId;
    },
    templateUrl: "outer-template.html"
    };
});
outerInnerApp.directive("innerDirective", function() {
    return {
    restrict: "E",
    scope: {
        //add innerId here
        innerId: "@"
    },
    link: function(scope, element, attrs) {
        //remove scope assignment here
        //scope.innerId = attrs.innerId;
    },
    templateUrl: "inner-template.html"
    };
});

我目前不明白为什么会有不同，比如说， 

innerId:"@"

并在链接函数中设置范围的值

link: function(scope, element, attrs) {
    scope.innerId = attrs.innerId;
}

当我找出为什么它的行为不同时，我会回复。

于 2013-12-13T23:13:47.223 回答