AngularJs实战（四）

小鱼儿_zhang

于 2015-12-13 11:13:21 发布

阅读量285

点赞数

分类专栏： AngularJS（前言）

本文链接：https://blog.csdn.net/qq_20261343/article/details/50281665

版权

AngularJS（前言）专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])

myModule.directive("drink", function() {
    return {
        restrict:'AE',
        scope:{
            flavor:'@'  //@：把当前属性的值进行传递，传递的是字符串
        },
        template:"<div>{{flavor}}</div>" //取出独立作用域中的值
        // ,
        // link:function(scope,element,attrs){
        //  scope.flavor=attrs.flavor; //取出自定义属性的值
        // }
    }
});

//页而中使用：
    <body>
        <div ng-controller="MyCtrl">
            <drink flavor="{{ctrlFlavor}}"></drink>
        </div>
    </body>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
}])

// 指令与控制器之间实现双向绑定
myModule.directive("drink", function() {
    return {
        restrict:'AE',
        scope:{
            flavor:'=' // = ：双向的数据绑定，这时的flavor 就绑定到
                       // 了控制器上的 ctrlFlavor 上面
        },
        template:'<input type="text" ng-model="flavor"/>'
    }
});

//页面中
<body>
    <!-- 指令与控制器之间实现双向绑定  MyCtrl：是父scope -->
        <div ng-controller="MyCtrl">
            Ctrl:
            <br>
            <input type="text" ng-model="ctrlFlavor">
            <br>
            Directive:
            <br>
            <!-- 

                当独立scope 是 @ 的时侯，需要用 {{ctrlFlavor}} 来取控制器中的值
                           是 = 的时侯，只接取值即可 ctrlFlavor,也就是取父scop中的值
             -->
            <drink flavor="ctrlFlavor"></drink>
        </div>
    </body>

var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.sayHello=function(name){
        alert("Hello "+name);
    }
}])

//指令调用父作用域的函数
myModule.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&' //引用 父作用域中的函数
        },
        template:'<input type="text" ng-model="userName" /><br/>'+
                 '<button class="btn btn-default" ng-click="greet({name:userName})">Greeting</button><br/>'
    }               //{name:userName} : 表示将 userName 的值绑定到 name上，从而作为函数的参数
});

//页面中：
<body>
        <div ng-controller="MyCtrl">
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
            <greeting greet="sayHello(name)"></greeting>
        </div>
    </body>

这里写图片描述

var appModule = angular.module('TestFormModule', []);
appModule.controller("TestFormModule",function($scope){
    $scope.user={
        userName:'damoqiongqiu',
        password:''
    };

    $scope.save=function(){
        alert("保存数据!");
    }
});

//页面中
<body>
    <!-- angularJs 内置指令 from -->
        <form name="myForm" ng-submit="save()" ng-controller="TestFormModule">
              <input name="userName" type="text" ng-model="user.userName" required/>
              <input name="password" type="password" ng-model="user.password" required/>

            <!-- 将 myForm 表单绑定到 $invalid 内置指令上，表示提交按钮是可用还是不可用 -->
            <input type="submit" ng-disabled="myForm.$invalid"/>
        </form>
    </body>

var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true, //内容与内容是可以变换的
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}</div>'
                    // ng-transclude 在内容插入前，这个指令所在元素的任何已存在内容会被清除。
                 + '<div class="body" ng-show="showMe" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs) {
            scope.showMe = false;
            scope.toggle = function() { //提供指令函数
                scope.showMe = !scope.showMe; //根据 scope.showMe 是否为true 来决定是否来显示
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope) {
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});

//页面中
    <body>
        <div ng-controller='SomeController'>
            <expander class='expander' expander-title='title'>
                {{text}} <!-- 这个内容会作为有 ng-transclude 指命的内容  -->>
            </expander>
        </div>
    </body>

var expModule=angular.module('expanderModule',[])

expModule.directive('accordion', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        template : '<div ng-transclude></div>',
        controller : function() {
            var expanders = [];
            this.gotOpened = function(selectedExpander) {
                angular.forEach(expanders, function(expander) {
                    if (selectedExpander != expander) {
                        expander.showMe = false;
                    }
                });
            }
            this.addExpander = function(expander) {
                expanders.push(expander);
            }
        }
    }
});

expModule.directive('expander', function() {
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        require : '^?accordion',
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                  + '<div class="title" ng-click="toggle()">{{title}}</div>'
                  + '<div class="body" ng-show="showMe" ng-transclude></div>'
                  + '</div>',
        link : function(scope, element, attrs, accordionController) {
            scope.showMe = false;
            accordionController.addExpander(scope); //添加 scope
            scope.toggle = function toggle() {
                scope.showMe = !scope.showMe;       //显示 scope
                accordionController.gotOpened(scope);
            }
        }
    }
});

expModule.controller("SomeController",function($scope) {
    $scope.expanders = [{
        title : 'Click me to expand',
        text : 'Hi there folks, I am the content that was hidden but is now shown.'
    }, {
        title : 'Click this',
        text : 'I am even better text than you have seen previously'
    }, {
        title : 'Test',
        text : 'test'
    }];
});

//页面中
<body ng-controller='SomeController' >

        <accordion>
            <!-- 根据 expanders数组的大小来创建多个 expander-->
            <expander class='expander' ng-repeat='expander in expanders' expander-title='expander.title'>
                {{expander.text}}
            </expander>
        </accordion>
    </body>