deirective写form表单组件

标签：branch   hold   ext   表达   div   技术部   group   angular   上下   

directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定

但是当我们不使用隔离scope的时候，我们要能够灵活的进行，controller与directive之间的单项传递和双向传递

下面是一个简单的form表单组件：

directive部分：
var app = angular.module(‘myApp‘, []);

app.directive(‘superFields‘, [‘$templateCache‘, function ($tplCache) {
    return {
        restrict: ‘E‘,
        template: "<div>" +
            "<script type=‘text/ng-template‘ id=‘super.field.input‘>" +
            "   <input ng-if=‘item.type==\"input\"‘ placeholder=‘{{item.tips}}‘" +
            "          ng-model=‘superFieldsModel[item.model]‘ ng-blur=‘item.onBlur(item.model)‘ " +
            "          ng-change=‘item.onChange&&item.onChange(superFieldsModel[item.model], item.model)‘ />" +
            "</script>" +
            "<script type=‘text/ng-template‘ id=‘super.field.select‘>" +
            "   <select ng-options=‘s.value as s.text for s in item.options‘ ng-model=‘superFieldsModel[item.model]‘" +
            "           ng-change=‘item.onChange&&item.onChange(superFieldsModel[item.model],item.model)‘ />" +
            "</script>" +
            "<script type=‘text/ng-template‘ id=‘super.field‘><div class=‘field‘>" +
            "   <span>{{field.label}}</span><span>" +
            "   <div ng-repeat=‘item in field.items‘ ng-init=‘type=item.type;‘>" +
            "       <ng-include ng-if=\"type==\‘input\‘\" src=‘\"super.field.input\"‘ />" +
            "       <ng-include ng-if=\"type==\‘select\‘\" src=‘\"super.field.select\"‘ />" +
            "   </div></span>" +
            "</div></script>" +
            "<ng-include ng-repeat=‘field in fields‘ src=‘\"super.field\"‘ />" +
            "</div>",
        replace: true,
        link: function (scope) {

        }
    };
controller部分：

function DemoCtrl($scope) {
//我们通过superFieldsModel使directive和controller之间共用了一个scope，这样我们通过共用一个scope的方法实现两者之间的数据传递 

    $scope.superFieldsModel = {
        depart: 1,
        branch: 1,
        leader: 2,
    };

    $scope.onTextChanged = function (value, tag) {
        console.log(tag, value);
        console.log($scope.superFieldsModel);
    };

    $scope.onBlur = function (tag) {
        console.log(‘onBlur:‘, tag);
    };

    $scope.onLeaderChanged = function (value) {
        var items = $scope.fields[2].items;
        if (value == 3) {
            $scope.superFieldsModel.group = 1;
            items.push({
                type: ‘select‘,
                model: ‘group‘,
                options: [{
                        text: ‘家居‘,
                        value: 1
                    },
                    {
                        text: ‘服饰‘,
                        value: 2
                    },
                    {
                        text: ‘电器‘,
                        value: 3
                    },
                ],
                onChange: $scope.onSelectChanged
            });
        } else if (items.length === 4) {
            items.splice(3, 1);
            delete $scope.superFieldsModel.group;
        }
    };

    $scope.onBranchChanged = function (value) {
        var departOptions = $scope.fields[2].items[1].options;
        if (value === 2) {
            departOptions.splice(0, 1);
            $scope.superFieldsModel.depart = 2;
        } else {
            departOptions.splice(0, 0, {
                text: ‘技术部‘,
                value: 1
            });
            $scope.superFieldsModel.depart = 1;
        }

        $scope.superFieldsModel.leader = 1;
        $scope.onLeaderChanged($scope.superFieldsModel.leader);
    };

    $scope.onSelectChanged = function (value, tag) {
        console.log($scope.superFieldsModel);
    };
//我们通过fields传给directive的值，是一种单向传递，directive接收到的是字符串，不会再将值再传回来

    $scope.fields = [{
        label: ‘姓名‘,
        items: [{
            type: ‘input‘,
            model: ‘name‘,
            onBlur: $scope.onBlur,
            onChange: $scope.onTextChanged
        }]
    }, {
        label: ‘年龄‘,
        items: [{
            type: ‘input‘,
            model: ‘age‘,
            onChange: $scope.onTextChanged
        }],
    }, {
        label: ‘部门‘,
        items: [{
            type: ‘select‘,
            model: ‘branch‘,
            options: [{
                    text: ‘西安分公司‘,
                    value: 1
                },
                {
                    text: ‘北京分公司‘,
                    value: 2
                },
            ],
            onChange: $scope.onBranchChanged
        }, {
            type: ‘select‘,
            model: ‘depart‘,
            options: [{
                    text: ‘技术部‘,
                    value: 1
                },
                {
                    text: ‘销售部‘,
                    value: 2
                },
                {
                    text: ‘运营部‘,
                    value: 3
                },
                {
                    text: ‘产品部‘,
                    value: 4
                },
            ],
            onChange: $scope.onSelectChanged
        }, {
            type: ‘select‘,
            model: ‘leader‘,
            options: [{
                    text: ‘张三‘,
                    value: 1
                },
                {
                    text: ‘李四‘,
                    value: 2
                },
                {
                    text: ‘王五‘,
                    value: 3
                },
            ],
            onChange: $scope.onLeaderChanged
        }]
    }]
}
app.controller(‘DemoCtrl‘, [‘$scope‘, DemoCtrl]);

有疑问可以随时提问哦，看到会及时回复的

deirective写form表单组件

标签：branch   hold   ext   表达   div   技术部   group   angular   上下   

原文地址：http://www.cnblogs.com/angel1254/p/6602284.html