AngularJS 04

最新推荐文章于 2019-11-07 18:48:51 发布

原创最新推荐文章于 2019-11-07 18:48:51 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

angularJS 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个具体的示例展示了如何使用AngularJS创建自定义指令，并实现控制器与视图之间的数据绑定。包括两种不同的数据绑定方法：一种是通过属性传递静态字符串到指令中显示；另一种是利用双向数据绑定来同步更新控制器与指令内的模型。

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<div ng-app="Ng">
    <div ng-controller="Ctrl">
        <kid dones="Test(chore)"></kid>
        <div dirnk testsss="Test2!"></div>

        Ctrl
        <input type="text" ng-model="Model2s" /><br />
        Dir
        <div dirnk2 test2="Model2s"></div>
    </div>


   

    
</div>



<script>
    var ng = angular.module("Ng", []);
    ng.controller("Ctrl", function ($scope) {

        $scope.Test = function (chore) {

            alert(chore + "!");
        }

        $scope.Model2s = "方法2测试";
    })
    ng.directive("kid", function () {
        return {
            restrict: "E",
            scope:{dones:"&"},
            template: '<input type="test" ng-model="chore">{{chore}}' + '<button ng-click="dones({chore:chore})">提交</button>'
        }

    })

    //方法一
    ng.directive("dirnk", function () {

        return {
            template: "<div>{{test}}</div>",
            link: function (scope, element, attrs)
            {
                scope.test = attrs.testsss;

            }
        }
    })

    //方法二
    ng.directive("dirnk2", function () {

        return {
            scope:{test2:"="},//这里的等于就等同于双向，这里改变值后，Ctrl也会改变
            template: '<input type="test" ng-model="test2">'
        }
    })
   
</script>