AngularJS 自定义指令(2)

<html ng-app="myApp">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script type="text/javascript" src="./angular.min.js"></script>
</head>
<body ng-controller="mainController">

    原父级内容:{{pmsg}}
    <input type="text" name="" ng-model="pmsg" >
    <!-- 出入数据指令 加上值 环境为body 只是嵌入到标签内 -->
    <my-directive msg="abc" a="abc" b="{{pmsg}}" c="pmsg" d="pEvent(m)"></my-directive>
</body>
<script type="text/javascript">
    // 在正式的开发中子级不应该影响父级的数据 也不应该直接使用父级的数据 而是要由父级传入数据
    var app=angular.module("myApp",[]);
    app.controller("mainController",["$scope",function($scope){
        $scope.pmsg="父级内容";
        $scope.pEvent=function(m){
            console.log("事件被执行")
            return "a"
        }
    }]);

    app.directive("myDirective",function(){
        return{
            scope:{//创建一个隔开的作用域 现在子级就不能修改父级数据了 并且也不能直接获得父级的数据
                    //里面的数据都会是传入进去的
                    msg:"@", //@单项传递 首先在scope中创建 键  然后传入tempmate中输出 在到需要调用的地方调用
                    msg2:"@a",
                    pmsg:"@b",
                    //@ 如果后面没有任意字符 必须传入键名  如果接了任意字符  就会找@ 后的字符串.在
                    //template中传入的和scope中的是一样的
                    c:"=",// = 表示双向绑定,子级和父级改一个另一个也会更改 用法和@一样,只是变量不需要"{{}}"
                    d:"&",// & 父级方法传递
            },
            template:`
                <div>
                    <h2>自定义指令</h2>
                    使用父级的消息:{{pmsg}}
                    <input type="text" ng-model="pmsg"/>
                    <h3>{{msg}}</h3>
                    <p>{{msg2}}</p>
                    <input type="text" ng-model="c"/>
                    <h3>{{d({m:"此消息来自子级"})}}</h3>
                </div>
            `
            link:function(scope,el,attrs){//angularjs 声明周期之一  链接阶段 在此阶段 DOM已经渲染完毕 可以安全使用
                //link 阶段常用于事件添加或是样式的后修改
                //scope打印为 scope内容  el 打印为模板内容  attrs 为DOM属性值
                //angular 内置轻量级的jquery
                angular.element(el).find("h3").css()
            }
            controller:"myController"

        }
    app.controller(myController,["$scope",function($scope){

    }])
</script>

</html>```
最后编辑于：2017.12.09 01:51:45
AngularJS 自定义指令(2)

推荐阅读更多精彩内容
