Question

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

我正在读一本书＆＃34;掌握Josh Kurz的AngularJS指令＆＃34;。

我在这里举了一个例子，但并不是很了解。

这是下面的代码，

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

从上面的例子可以看出，

我创建了三个指令＆＃34; bb-string＆＃34;，＆＃34; bb-two-string＆＃34;和＆＃34; bb-expression＆＃34;。

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

我从术语定义范围中理解的是＆＃34;指令从其父指令获得的范围＆＃34;。

所以我是否理解得恰当，或者是指令＆＃34; bb-string＆＃34;有一个隔离范围，指令＆＃34; bb-two-string＆＃34;有一个定义的范围。？

如果所有指令都使用＆＃34;定义范围＆＃34;这些范围也是从控制器＆＃34; myCtrl＆＃34;继承而来的。范围？

最后一次任务，

指令＆＃34; bb-expression＆＃34;有代码，

scope.term = scope.term();

＆＃34; scope.term（）＆＃34;意思是，术语功能来自何处？

这是实例的链接。

First directive example

Answer 1

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

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

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

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

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

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

1 个答案: