derective示例

1、指令的定义

  .directive('haproxySetting', [

    function () {

      return {

        restrict: 'AEC',

        scope: {

          haproxy: '=',

          farmRoles: '='

        },

        templateUrl: 'app/views/common/haproxySetting.html',

        controller: ['$scope', '$modal', function ($scope, $modal) {

          $scope.networks = ['auto', 'private', 'public'];

          $scope.addBackend = function () {

            var haBackend={

                'host': '',

                'port': '80',

                'backup': '0',

                'down': '0',

                'mode': 0,

                'farm_role_id': ($scope.farmRoles && $scope.farmRoles.length > 0) ? $scope.farmRoles[0].farm_role_id : ''//代理应用服务才有

            };

            $scope.haproxy.backends.push(haBackend);

          };

          $scope.deleteBackend = function (backend) {

            for (var i = 0; i < $scope.haproxy.backends.length; i++) {

              if ($scope.haproxy.backends[i] === backend) {

                $scope.haproxy.backends.splice(i, 1);

                break;

              }

            }

          };

        }]

      };

    }

  ])

2、应用指令的html

<div class="row">

    <div class="col-sm-12">

        <div class="panel">

            <div class="panel-body">

                <button class="btn btn-default m-b-10" data-ng-click="addHaproxy()"><i class="fa fa-plus m-r-10"></i>增加代理</button>

                <table class="table table-hover table-striped">

                    <thead>

                    <tr>

                        <td>端口</td>

                        <td>描述</td>

                        <td></td>

                    </tr>

                    </thead>

                    <tbody>

                    <tr data-ng-repeat="haproxy in haproxies" data-ng-click="selectHaproxy(haproxy)" ng-class="{active: haproxy.active}">

                      <td>{{haproxy.port}}</td>

                      <td>{{haproxy.hostname}}</td>

                      <td><a class="text-danger" data-ng-click="deleteHaproxy(haproxy)"><i class="fa fa-trash"></i></a></td>

                    </tr>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

    <div class="col-sm-12" data-ng-show="showPage">

        <haproxy-setting data-haproxy="activeHaproxy"

                       data-farm-roles="newFarmRoles"></haproxy-setting>

    </div>

</div>

3、使用指令的js

              $scope.buildHaproxies = function () {

                $scope.activeHaproxy = {

                  'port': '',

                  'description': '',

                  'backends': [

                    {

                      'host': '',

                      'port': '80',

                      'backup': '0',

                      'down': '0',

                      'mode': 0,

                      'farm_role_id': ($scope.farmRoles && $scope.farmRoles.length > 0) ? $scope.farmRoles[0].farm_role_id : ''//代理应用服务才有

                    }

                  ],

                  'healthcheck.interval': '30',

                  'healthcheck.fallthreshold': '5',

                  'healthcheck.risethreshold': '3',

                  'active':true

                };

                //$scope.proxies = [];

                $scope.haproxies.push($scope.activeHaproxy);

                $scope.curFarmRoleId = $scope.appServerSubmitData.farm_role_id;

              };

在html中：<haproxy-setting data-haproxy="activeHaproxy" data-farm-roles="newFarmRoles"></haproxy-setting> 这行中，data-haproxy="activeHaproxy"指的意思是指令里面的的属性haproxy：

        scope: {

          haproxy: '=',

          farmRoles: '='

        },
和第3中使用的$scope.activeHaproxy是一一对应的，双向绑定的。就是说js里面的$scope.activeHaproxy值改变了，指令里面的haproxy也会改变，反之也一样。

<div class="row">
    <div class="col-sm-12">
        <div class="panel">
            <div class="panel-body">
                <button class="btn btn-default m-b-10" data-ng-click="addHaproxy()"><i class="fa fa-plus m-r-10"></i>增加代理</button>
                <table class="table table-hover table-striped">
                    <thead>
                    <tr>
                        <td>端口</td>
                        <td>描述</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr data-ng-repeat="haproxy in haproxies" data-ng-click="selectHaproxy(haproxy)" ng-class="{active: haproxy.active}">
                      <td>{{haproxy.port}}</td>
                      <td>{{haproxy.hostname}}</td>

                      <td><a class="text-danger" data-ng-click="deleteHaproxy(haproxy)"><i class="fa fa-trash"></i></a></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="col-sm-12" data-ng-show="showPage">
        <haproxy-setting data-haproxy="activeHaproxy"
data-farm-roles="newFarmRoles"></haproxy-setting>
    </div>
</div>