【总结】angularJs的一些用法

1、ng-true-value

当我们点击checkbox 选中复选框时，ng-model 的绑定默认值是true，取消选中时为false.

<input ng-model="checkboxModel" type="checkbox" >//选中时，checkboxModel 等于 true

如果需要获取的值为字符串或者数字呢？

那么就需要用到 ng-true-value 和ng-false-value

选中checkbox 时：

<input ng-model="checkboxModel" type="checkbox" ng-true-value=" 'hello wolrd' " > //注意 ng-true-value 中的值如果需要显示字符串的话必须使用单引号

取消选中checkbox 时：

2、自定义指令

指令引入：

在定义模块的js引入定义指令的js即可使用

在index.js中定义模块

angular.module('soc.app.event',[依赖]）

在index.js中引入要使用的指令

扫描二维码关注公众号，回复： 3891976 查看本文章

require('./eventRule/eventCheckbox.directive.js');

定义指令时要定义在模块下

在文件eventCheckbox.directive.js中

angular.module('soc.app.event').directive('checkAllHandle', checkAllHandle);

指令写法：

使用：

<input type="checkbox" id="chkAll" check-all-handle relate-data="dataRuleList">

function checkAllHandle() {
    return {
        scope: {
            relateData: '='
        },
        link: function (scope, element) {
            $(element).bind('click', function () {//checkbox #chkAll
                var isCheckd = $(element).prop('checked');
                console.log(scope.relateData);
    dataRulrList是数组，是别的定义好的，所以让relate-data="dataRuleList"，现在scope.relateData是数组
                console.log($(element).prop('checked'));
    $(element)会返回当前被点击的对象，类似event，prop() 方法设置或返回被选元素的属性和值。
                scope.$apply(function () {
                    angular.forEach(scope.relateData, function (value) {
                        value.checked = isCheckd;
                    });
对于检查绑定的数据到底有没有发生变化，实际上是由scope.digest()完成的，但是我们几乎从来就没有直接调用过这个方法，而是调用scope.apply()方法，是因为在scope.apply()方法里面，它会去调用scope.digest()方法。scope.apply()方法带一个函数或者一个表达式，然后执行它，最后调用scope.digest()方法去更新bindings或者watchers。
                // //
                // //     scope.$parent.optParams.checkAll = isCheckd ? true : false;
                // //     scope.$parent.include = [];
                // //     scope.$parent.exclude = [];
                // //     scope.$emit('asset-check-stat');
                // })
            });

            // $('.table').on('click', 'input.chkItem', function () {//checkbox .chkItem
            //     var uuid = $(this).attr('value');
            //     if ($(this).prop('checked')) {
            //         scope.$apply(function () {
            //             scope.$parent.include.push(uuid);
            //             _.pull(scope.$parent.exclude, uuid);
            //             scope.$emit('asset-check-stat');
            //         })
            //
            //     } else {
            //         scope.$apply(function () {
            //             scope.$parent.exclude.push(uuid);
            //             _.pull(scope.$parent.include, uuid);
            //             scope.$emit('asset-check-stat');
            //         })
            //     }
            //
            // });
        }
    }
}

指令是：myTab

指令中定义的变量：myId myName myShow，在标签中写了数值之后可以在定义的指令中使用

<div ng-controller="Aaa">
    <div my-tab my-id="div1" my-name="name" my-fn="show(num)" class="J-tab"></div>
    <div my-tab my-id="div2" my-name="name" my-fn="show(num)" class="J-tab"></div>
</div>
<script type="text/javascript">

var m1 = angular.module('myApp',[]);

m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'xiecg';
    $scope.age = 18;
    $scope.show = function(num){
        console.log(num);
    };
}]);


m1.directive('myTab',function(){
    return {
        restrict : 'ECMA',
        replace : true,    //替换的方式插入内容//绑定策略
        scope : {
            myId : '@',        //解析普通字符串
            myName : '=',    //解析数据
            myFn : '&'        //函数
        },
        controller : ['$scope',function($scope){
            //共享数据存放在这里
            $scope.name = 'this is a xiecg';
        }],
        template : '<div id="{{myId}}">\
                    <input type="button" value="1" class="active" ng-click="myFn({num:456})">\
                    <input type="button" value="2">\
                    <input type="button" value="3">\
                    <div style="display:block;">{{myName}}</div>\
                    <div>2222</div>\
                    <div>3333</div>\
                </div>'
    };
});

</script>