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>