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 時：

<input ng-model="checkboxModel" type="checkbox" ng-false-value=" 'bye bye' " > 

2、自定義指令

指令引入：

在定義模組的js引入定義指令的js即可使用

在index.js中定義模組

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

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

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>