我的指令是否使用定义或隔离或子范围？答案

【问题标题】：Is my directive using a defining or isolate or child scope?我的指令是否使用定义或隔离或子范围？
【发布时间】：2015-08-24 07:13:28
【问题描述】：

我正在学习Angular.js的指令模块以及如何创建自己的指令。

我正在阅读一本书“由 Josh Kurz 编写的掌握 AngularJS 指令”。

这里我看了一个例子，但不太明白。

这是下面的代码，

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <title>Recipe 02 example 01</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\js\bootstrap.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link>
    <script type="text/javaScript">
        angular.module("MyApp",[]);

        (function(){
            angular.module("MyApp").controller("myCtrl",myCtrl);
            angular.module("MyApp").directive("bbString",bbString);
            angular.module("MyApp").directive("bbTwoString",bbTwoString);
            angular.module("MyApp").directive("bbExpression",bbExpression);

            function myCtrl($scope){
                $scope.actorName = "Jim Carry";
            };

            function bbString(){
                var obj = {
                    scope : {
                        name : "@abbraKaDabraa"
                    },
                    template : "<input ng-model='name' />"  
                }

                return obj;
            };

            function bbTwoString(){
                var obj = {
                    scope : {
                        name : "=theName"
                    },
                    template : "<input ng-model='name' />"  
                }
                return obj;
            };

            function bbExpression(){
                var obj = {
                    scope : { term : "&" },
                    template : "<input ng-model='term' />",
                    link : function(scope,element,attrs){                           
                        scope.term = scope.term();
                    }
                }

                return obj; 
            }
        })();
    </script>
</head>
<body ng-controller="myCtrl">
    <div class="container">
        <div class="well">
            <div bb-string abbra-ka-dabraa="{{actorName}}"></div>
            <p><b>{{actorName}}</b></p>
            <div bb-expression term="newTerm = actorName + ' Some Extra content'"></div>    
            <br/>
            <div bb-two-string the-name="actorName"></div>
        </div>
    </div>      
</body>

从上面的例子可以看出，

我创建了三个指令“bb-string”、“bb-two-string”和“bb-expression”。

读完这本书，我的理解是所有的指令都有定义范围。

我从定义范围这个术语的理解是“指令从其父指令获得的范围”。

所以无论我理解正确，还是指令“bb-string”具有隔离范围，而指令“bb-two-string”具有定义范围。 ?

如果所有指令都使用“定义范围”，那么这些范围是否从控制器“myCtrl”范围继承？

最后的任务，

指令“bb-expression”有一个代码，

scope.term = scope.term();

“scope.term()”是什么意思，这个term function是从哪里来的？

这是现场示例的链接。

First directive example

【问题讨论】：

我不知道“定义范围”是什么意思。 angular中有根作用域、隔离作用域和嵌套作用域。
这里是完整的解释github.com/angular/angular.js/wiki/Understanding-Scopes

标签： angularjs angularjs-directive

【解决方案1】：

您在示例中的所有指令都使用隔离范围，因为您在指令定义中定义了范围对象。如果您没有使用范围参数，那么指令的范围将是他们调用的地方的子范围。这三种情况之间的区别在于您如何使用传递给指令的参数。

在第一个指令中，您使用@ 传递了一个属性，因此您只从外部将一个值传递给您的指令。如果您更改传递参数的值，它不会影响指令之外的给定参数的值。因此，您可以将其视为单向绑定。

您的第二个指令通过使用= 符号来使用双向绑定。因此，当您更改指令中传递的参数时，更改会反映回将该值传递给指令的外部作用域。

您的第三个指令使用& 将参数作为表达式传递。使用这种方法，您可以将函数传递给指令并在指令中调用这些函数。因此，在您的示例中，您通过给定语句 $scope.term = $scope.term();

将传入函数的返回值分配给您的范围

【讨论】：