Question

您好我已经为切换按钮创建了一个指令。

指令

app.directive('toggleBtn',[function () {
    return {
      restrict: 'EA',
      replace: true,
      require: ['name', '^ngModel'],
      scope: {
        isDisabled: '=',
        name: '@',
        ngModel: '='
      },
      template:
          ' <div class="toggle-switch on off"> ' +
          '     <input ng-model="ngModel" id="{{name}}" type="checkbox" ng-disabled="{{isDisabled}}" ' +
          '         hidden=""><label for="{{name}}" ' +
          '         class="ts-helper"></label> ' +
          ' </div> '
    };
  }]);

HTML

 <input ng-model="sample1" name="sample1"
                            type="checkbox" class="someclass" ng-change="doSomething()" toggle-btn>

指令工作正常，除了ng-change。 ng-change属性被添加到div，而不是input-checkbox。

如何将这些属性添加到input-checkbox？

不仅仅是ng-change，还可以有其他属性。像ng-focus，title，ng-click等...（ng-click和title将起作用，因为它将附加到主div，我只是在这里给出一个例子）。

Plunkr Demo here

Answer 1

将您的代码更改为此

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.doSomething = function() {
    console.log("Do something");

  }
});

app.directive('toggleBtn', [function() {
  return {
    restrict: 'EA',
    replace: true,
    require: ['name', '^ngModel'],
    scope: {
      isDisabled: '=',
      name: '@',
      ngModel: '=',
      ngChange: '&'
    },
    template: ' <div class="toggle-switch on off"> ' +
      '     <input ng-model="ngModel" id="{{name}}" type="checkbox" ng-change="ngChange()" ng-disabled="{{isDisabled}}" ' +
      '         hidden=""><label for="{{name}}" ' +
      '         class="ts-helper"></label> ' +
      ' </div> '
  };
}]);

Demo

将HTML中提到的自定义方法和类绑定到指令模板

1 个答案: