Javascript 外部AngularJS指令不'；无法正确构建内部指令_Javascript_Html_Angularjs_Angularjs Directive_Angularjs Scope

Javascript 外部AngularJS指令不'；无法正确构建内部指令

javascript html angularjs

Javascript 外部AngularJS指令不'；无法正确构建内部指令,javascript,html,angularjs,angularjs-directive,angularjs-scope,Javascript,Html,Angularjs,Angularjs Directive,Angularjs Scope,使用AngularJS 1.0.8，我试图创建一些可重用的指令，以创建这样一种情况：web开发人员可以编写一个带有多个属性的“顶级”指令，而这个指令又有一个包含其他指令的模板，这些指令本身可能包含其他指令等我遇到的问题是让“内部”模板知道顶级属性。我原以为这是一个普遍存在的问题，但从我的研究来看，没有人问这个问题我创建这个来显示问题： <!DOCTYPE html> <html ng-app="outerInnerDirectivesApp"> <head>

使用AngularJS 1.0.8，我试图创建一些可重用的指令，以创建这样一种情况：web开发人员可以编写一个带有多个属性的“顶级”指令，而这个指令又有一个包含其他指令的模板，这些指令本身可能包含其他指令等

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

我创建这个来显示问题：

<!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>


外部/内部指令
单级指令如下：
外部/内部指令如下（应为“outer123”）：

在“砰砰”的一声中

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

外部指令和内部指令不起作用

我对这些的期望是

（i） outerDirective编译/链接以生成html

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

然后

（ii）innerDirective编译/链接以生成html

<div>outer123</div>

outer123

但在步骤（ii）中，我得到

因此，innerDirective生成一个空div

事实上，如果我将outer-template.html更改为

<div>{{outerId}}<div>

{{outerId}

然后该值正确显示，因此看起来scope.outerId在正确的点可用，但Angular对我尝试以我现在的方式使用它感到不高兴

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

如果您要设计具有独立作用域的指令，我建议使用独立作用域来定义要使用的属性类型：

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

这是一本书

外部指令正在使用属性中定义的值。因此，要将值传递到隔离范围，我们可以使用

。然后，内部作用域通过绑定变量。因此，我们可以使用

设置绑定属性。

对此有更多的想法。在使用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函数中设置scope的值

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

当我发现为什么它的行为不同时，我会发回

谢谢，大卫。这正是我需要的。事实上，你的回答在我的理解上显示了一个很大的差距，这是非常有用的填补！为了其他人的利益，我将在下面解释我最初的知识差距（如果我错了，请纠正我，任何人）。outerId:“@”位可以。它正在HTML中查找属性…outer id=“value”。。。或者…外部id={{interpolatedValue}}然而，我不喜欢的是，内部id:'='增加了一个间接级别。它正在HTML中查找…内部id='propertyName'，然后将查找$parentScope.propertyName的值以获得实际值。您可能希望将其作为自己的问题发布，而不是作为已回答和接受的问题的答案。

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