美文网首页
15.指令作用域

15.指令作用域

作者: miner敏儿 | 来源:发表于2017-05-28 11:42 被阅读0次

指令作用域


<body ng-app='app' ng-controller='zmController'>

<p>{{name}}</p>

<zm></zm>

<script src=angular1.6.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",function($scope){
        //1.
        $scope.name = "父控制器的name"
    }])

    /*2.指令*/
    app.directive("zm",function () {
        return{
            restrict:'EA',
            template:'<h1>自定义指令:{{name}}</h1>',
            controller:function ($scope) {
            },
            replace:true,
        }
    })

</script>
</body>
</html>
image.png

1.scope为bool值

添加input标签 添加ng-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body ng-app='app' ng-controller='zmController'>

<input type="text" ng-model="name">
<p>{{name}}</p>

<zm></zm>

<script src=angular1.6.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",function($scope){
        //1.
        $scope.name = "父控制器的name"

    }])

    /*2.指令默认情况和父级使用的是同一个$scope 自己可以去指定作用范围*/
    app.directive("zm",function () {
        return{
            restrict:'EA',
            template:'<h1>自定义指令:{{name}}</h1>',
            controller:function ($scope) {
//3.
//                $scope.name = "123"
            },
//            scope:true,
            /*当指定scope为true时,自己就会独立出来一个作用域,当给子级控制器增加name属性时,只有自身的是改变了  ,就是只有自定义指令的zm中的值改变了 其他的斗没有改变 即使改变input中的值,子级也不会改变.

            scope的值为false时,使用的时和父级同一作用域,改了子级的值,父级的值也会改变,改变父级的值,子级的值也会改变.
            * */
            replace:true,
        }
    })



</script>
</body>
</html>

a.当为false的时候:

  • 子控制器里面没有定义name的时候,使用父控制器的name值,并且当父控制器中的内容改变时,子控制器中的内容也会改变
image.png
  • 子控制器里面定义定义name的时候,子级的内容会覆盖父级的内容,但是当修改父级时,子级的内容也会变化
image.png image.png

b.当指定scope为true

自己就会独立出来一个作用域,子级没有给name赋值时,子级使用值是父级的值,修改父级时子级也会修改

当给子级控制器增加name属性时,子级的值会改变 , 但是父级的值没有改变,即使改变父级的值,子级也不会改变.

image.png image.png

scope为对象{}

scope值除了是bool之外,还能是一个对象{}

就相当于是一个隔离作用域.如果指令当中用到了属性,会在自己的作用域当中查找,如果有就直接使用,

没有name

  • 如果没有.就不显示,它不会到父级当中去查找,并且更改父级中name的值得时候子作用域当中的值不会发生改变
image.png

传入name值

子级的值就在子级显示,不会更改父级的值,当更改父级时子级也不会变化

image.png

指令作用域传递参数

@修饰符

我在外界写了一个content 我想从外界传入一个数据进来,

格式:外界传递参数,使用{{}}来传递

QQ截图20170528110255.png

特点:

  • 属于单向的传递,外界修改,内部也会跟着修改
  • 内部的修改不会影响外界
  • 如果内部当中有该属性,其值会被覆盖掉,使用的值是外界传入的值
QQ截图20170528111148.png QQ截图20170528111413.png QQ截图20170528111550.png QQ截图20170528111925.png

=修饰符

当使用"="传递数据时,不需要{{}} 直接在后面写上要传递的数据即可

         <zm content='content'  my-title="title"></zm>

特点:

  • 属于双向的传递
  • 无论那一边进行更改,都会受到影响
QQ截图20170528112747.png

&修饰符

要求外界传递方法进来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body ng-app='app' ng-controller='zmController'>
<zm childmethod="paraMethod()"  show = "show()"></zm>
<script src=angular1.6.js></script>
<script>
    /*1.创建模块*/
    var app = angular.module('app',[]);
    /*2.创建控制器*/
    app.controller("zmController",["$scope",function($scope){

        $scope.paraMethod = function () {
         alert('我是父控制器的方法')
        };
        $scope .show = function () {
            alert("hello world")
        }

        //传递给指令,然后指令也就有这些方法
    }])

    /*指令默认情况和父级使用的是同一个$scope 自己可以去指定作用范围*/
    app.directive("zm",function () {
        return{
            restrict:'EA',
            template:'<h1> <button ng-click="click()">我是子级控制器上的点击</button> </h1>',
            controller:function ($scope) {
               $scope.myTitle = "我是子标题";
               $scope.click = function () {
                   $scope.childmethod();
                   $scope.show()
               }
            },
//            scope:true,
            //我想拿到父控制器的方法
            scope:{
                childmethod:'&',
                show:'&'
            },
            /*
            e.要求外界传递方法进来
            d.当使用"="传递数据时,不需要{{}} 直接在后面写上要传递的数据即可
             <zm content='content' my-title="title"></zm
            replace:true,
        }
    })

</script>
</body>
</html>
QQ截图20170528113657.png

相关文章

  • 15.指令作用域

    指令作用域 1.scope为bool值 添加input标签 添加ng-model a.当为false的时候: 子控...

  • PHP指令作用域

    PHP总共有4个配置指令作用域:(PHP中的每个指令都有自己的作用域,指令只能在其作用域中修改,不是任何地方都能修...

  • 指令作用域

    默认情况规则:A、子级中没有对应数据,会去父级查找数据。 B、子级和父级使用的是同一...

  • 自定义指令问题

    每自定义一个指令,都会有自己的作用域。 默认情况下,指令当中的作用域与父作用域是同一个 ($scope就是同一个)...

  • AngularJS中controller作用域的继承与隔离

    我在以前的文章里写过关于指令的作用域继承与格里,指令作用域继承与隔离,可以在 directive 中通过 scop...

  • 2017-5-21 AngularJS学习笔记

    指令作用域 自定义指令可以又自己的控制器,自己的模型和作用域 默认情况,指令使用的模型是和它所在的控制器的模型是同...

  • angularjs ng-if 与 ng-repeat下的ng-

    那么ng-model指令对应的作用域属性子级作用域,而并非控制器注入的$scope作用域对象,这点在进行双向数据绑...

  • xdl2

    指令式编程 顺序结构 分支结构 循环结构 变量作用域

  • ng指令

    ng指令会自动生成一个js作用域因此里面无需用模板

  • iOS开发之宏定义的使用

    a、宏定义是预处理指令,所有的预处理指令以#开头 b、预处理指令的作用域是在编写指令的那一行开始,到文件的结尾结束...

网友评论

      本文标题:15.指令作用域

      本文链接:https://www.haomeiwen.com/subject/octhfxtx.html