Angularjs 访问父控制器数据，并结合角度控制器中的隔离作用域_Angularjs_Angularjs Directive_Angularjs Scope

Angularjs 访问父控制器数据，并结合角度控制器中的隔离作用域

angularjs

Angularjs 访问父控制器数据，并结合角度控制器中的隔离作用域,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,首先是代码，然后是说明： index.html <!DOCTYPE html> <html> <head> <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> <link rel="stylesheet"

首先是代码，然后是说明：

index.html

<!DOCTYPE html>
<html>

<head>
<script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
</head>

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <my-directive data="1" />
    <my-directive data="2" />
</div>
</body>

</html>

app.js

angular.module("myApp", []).directive("myDirective", function ($parent) {
  return {
      restrict: "E",
      scope: {
          data: "@",
      },
      template: function(element, attrs){
        switch(attrs.data){
          case '1':
            return '<h3>'+ $parent.stringForDirective1 + '</h3>';
          case '2':
            return '<h3>'+ $parent.stringForDirective2 + '</h3>';
        }
      }
  };
}).controller('myCtrl',function($scope){
$scope.stringForDirective1 = 'I was returned by the directive with HTML attribute data having the value 1.'
$scope.stringForDirective2 = 'I was returned by the directive with HTML attribute data having the value 2.'
});

angular.module（“myApp”，[]）.directive（“myDirective”，函数（$parent）{
返回{
限制：“E”，
范围：{
数据：“@”，
},
模板：函数（元素、属性）{
开关（属性数据）{
案例“1”：
返回“+$parent.stringForDirective1+”；
案例“2”：
返回“+$parent.stringForDirective2+”；
}
}
};
}).controller（'myCtrl'，函数（$scope）{
$scope.stringForDirective1='该指令返回的HTML属性数据值为1'
$scope.stringForDirective2='该指令返回的HTML属性数据值为2'
});

现在来解释一下。如果我在指令上设置'scope:false'，我可以轻松访问控制器的数据，因为指令位于其作用域内。然而，据我所知，为了将HTML属性中的任何值与自定义指令一起使用，整个指令必须放在一个独立的范围内

我想使用HTML属性返回使用父控制器数据的模板。

当使用“scope:false”并能够传入自定义HTML属性时，如何获得控制器数据的好处

$parent示例不起作用，我添加它只是为了显示我对解决方案的思考方式，我认为它清楚地显示了我的意图。

指令可以有三种可能的作用域模式：

独立作用域（作用域：{}）

子作用域（作用域：true）

继承的作用域（作用域：false）

根据指令的需要，这些作用域模式中的任何一种都是有效的

如果要创建具有隔离范围的指令，则可以通过元素的属性将模型传递到指令的隔离范围：

scope: {
    modelA: '=', // model binding
    modelB: '@', // string binding
    modelC: '&'  // method binding in parent scope
}

属性

<div directive model-a="user" model-b="hello {{ user.name }}" model-c="addUser(user)"></div>

示例（不是理想的指令实现，但这样做是为了说明如何通过属性将模型传递到隔离范围）

angular.module（“myApp”，[]）.directive（“myDirective”，函数（$parent）{
返回{
限制：“E”，
范围：{
数据：“@”，
StringForDirective 1:“=？”，
StringForDirective 2:“=？”
},
模板：“{stringForDirective1}}{{stringForDirective2}}”
};
}).controller（'myCtrl'，函数（$scope）{
$scope.stringForDirective1='该指令返回的HTML属性数据值为1'
$scope.stringForDirective2='该指令返回的HTML属性数据值为2'
});

HTML

不确定为什么要注入

$parent

依赖项。我希望这是您用来展示您的想法的例子：

$parent示例不起作用，我只是添加它来展示我一直在思考的解决方案，我认为它清楚地显示了我的意图。

不管怎样，你不需要这些。要使所有工作正常，只需摆脱依赖关系，不要将父作用域值合并到模板中，而是让Angular在编译模板后处理它（使用双大括号进行绑定）：

@pixebits如何传入自定义HTML属性，同时保留继承作用域的好处？您可以获得继承作用域的好处（在您的指令中，作用域：false）。那么你就不需要通过属性传递任何东西了，但问题是，除了要访问父作用域之外，我还想这样做。我想传入一个用作条件逻辑的属性，以返回从父作用域派生的字符串（参见我的示例）。谢谢！没有考虑指令在其模板中默认访问$parent。我假设这是因为指令模板在Angular求值之前返回字符串？

$parent

是每个范围对象的一部分（就像

$root

等）。例如，如果您在模板中放入

{{something}

，它将查找

范围。something

，对吗？当您放置

{{$parent}}

时也会发生同样的情况-它将查找

范围。$parent

。这里提到：请记住，您的指令不会有太多的可重用性，因为它的整个方法取决于控制器的作用域（尽管我相信您知道这一点）。

angular.module("myApp", []).directive("myDirective", function ($parent) {
  return {
      restrict: "E",
      scope: {
          data: "@",
          stringForDirective1: '=?',
          stringForDirective2: '=?'
      },
      template: '<h3 ng-if="data = '1'">{{stringForDirective1 }}</h3><h3 ng-if="data = '2'">{{stringForDirective2 }}</h3>'

  };
}).controller('myCtrl',function($scope){
$scope.stringForDirective1 = 'I was returned by the directive with HTML attribute data having the value 1.'
$scope.stringForDirective2 = 'I was returned by the directive with HTML attribute data having the value 2.'
});

<body ng-app="myApp">
<div ng-controller="myCtrl">
    <my-directive data="1" string-for-directive1="stringForDirective1" />
    <my-directive data="2" string-for-directive2="stringForDirective2" />
</div>
</body>

switch(attrs.data){
      case '1':
        return '<h3>{{$parent.stringForDirective1}}</h3>';
      case '2':
        return '<h3>{{$parent.stringForDirective2}}</h3>';
    }