Question

我编写了一个自定义AngularJS指令，该指令实现了基于Bootstrap Toggle的切换复选框。我添加了对angular-translate的支持，但这超出了我的实际范围。此外，我想使用angular-cookies来保存和恢复特定复选框的当前状态。

但是，我的指令没有正确地获取数据模型的初始值。

这是我的指示：

app.directive('toggleCheckbox', ['$rootScope', '$translate', '$timeout', function($rootScope, $translate, $timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attributes, ngModelController) {

      // Change model, when checkbox is toggled
      element.on('change.toggle', function(event) {
        var checked = element.prop('checked');
        console.log('change.toggle was called: ' + checked + ' vs. ' + ngModelController.$viewValue);
        if (checked != ngModelController.$viewValue) {
          scope.$apply(function changeViewModel() {
            ngModelController.$setViewValue(checked);
            console.log('change.toggle:', checked);
          });
        }
      });

      // Render element
      ngModelController.$render = function() {
        element.bootstrapToggle(ngModelController.$viewValue ? 'on' : 'off')
      };

      // Translate checkbox labels
      var updateLabels = function() {
        var offLabel = (attributes['off'] ? $translate.instant(attributes['off']) : 'Off');
        var onLabel  = (attributes['on']  ? $translate.instant(attributes['on'])  : 'On');

        angular.element(document).find('label.btn.toggle-off').html(offLabel);
        angular.element(document).find('label.btn.toggle-on').html(onLabel);
      };

      // Update labels, when language is changed at runtime
      $rootScope.$on('$translateChangeSuccess', function() {
        updateLabels();
      });

      // Initialize labels for the first time
      $timeout(function() {
        updateLabels();
      });

      // Clean up properly
      scope.$on('$destroy', function() {
        element.off('change.toggle');
        element.bootstrapToggle('destroy');
      });

      // Initialize element based on model
      var initialValue = scope.$eval(attributes.ngModel);
      console.log('initialValue:', initialValue);
      element.prop('checked', initialValue);
    }
  };
}]);

这是我从cookie初始化数据模型的方法：

mainController.controller('MainCtrl', ['$scope', '$cookies', 'Main', function($scope, $cookies, Main) {

  this.$onInit = function() {
    $scope.settings.foobar = $cookies.get('foobar');
    console.log('$onInit(): ', $scope.settings.foobar);
  };

  // ...

}]);

这就是我最终使用我的指令的方式：

<div id="foobar-switcher" ng-if="isAdmin()">
  <label for="foobar_toggle"><span translate="foobar"></span>:</label>
  <input id="foobar_toggle" type="checkbox"
    ng-model="settings.foobar" ng-change="setFoobarCookie(settings.foobar)" toggle-checkbox
    data-off="foo_label" data-offstyle="success"
    data-on="bar_label" data-onstyle="danger" />
</div>

最终，我得到了这个调试输出：

controllers.js：33 $ onInit（）：true

directives.js：76 initialValue：true

directives.js：37调用change.toggle：false与false

因此，如果值true存储在cookie中，则模型会在全局范围内正确初始化，甚至指令也会使用正确的值来初始化element。 change.toggle事件处理程序也会被触发，但元素的值现在为false。

为什么会这样，我该如何解决这个问题？

Answer 1

事实证明$cookies.get('foobar')返回一个字符串，而复选框无法处理该类型的ng-model。相反，必须评估cookie值，以便可以在数据模型中设置布尔值：

var cookie = $cookies.get('foobar');
$scope.settings.foobar = (cookie === 'true');

然后在页面加载时正确初始化该复选框。

自定义指令不接受模型初始化

1 个答案: