制作开关指令

Question

我正在尝试传递我想要更改值的$scope。

这是同一页面上的两个开关按钮。

查看

<div class="input">
    <switch state="false" toggle="user.emailNotification">
        <flip></flip>
    </switch>
</div>

<div ng-click="saveNotifySettings()" class="button fill primary">Vista</div>

控制器

  app.controller('notifySettingCtrl', function($scope, Users){
    Users.get().$promise.then(function(data) {
      $scope.user = data;
      console.log($scope.user.emailNotification);
    });
    $scope.saveNotifySettings = function() {
        console.log("PUT the new value for the switch");
    };
  });

当我按下按钮时，状态从false变为true 首先，我想使用$scope.user.emailNotification中的现有值初始化状态，然后更改它并将更改传递给控制器​​。

我指令的开头。

切换指令

(function() {
  define(['angular', 'app', 'underscore'], function(angular, app, _) {
    app.directive('switch', function() {
      return {
        restrict: 'E',
        scope: {
          value: '&toggle',
        },
        link: function(scope, element) {
          var x = scope.value();

          element.bind('mouseenter', function() {
            console.log(x);
          });

          var $element = angular.element(element),
              uniqueId = _.uniqueId('switch-'),
              state = $element.attr('state');

          state = typeof state === 'undefined' ? false : state;

          $element.data('uniqueId',uniqueId)
            .attr('state',state)
            .attr('alive',true);

          $element.on('click.'+uniqueId,function(){
            if (state === true) {
              $(this).attr('state',false);
              state = false;
            } else {
              $(this).attr('state',true);
              state = true;
            }
          });
        }
      };
    });
  });
}).call(this);

我非常擅长创建指令，所以任何帮助都很受欢迎。 我花了很多时间在这上面并且令人沮丧：/

更新：

我创建了http://jsfiddle.net/HuLn4/。我接受了你的指针并进行了重构。

TLDR：我正在尝试通过发送我想要更改的模型来创建指令user.emailNotification，当单击该元素时，它会更改true / false和false / true的值并存储它回到控制器$ scope.user所以它可以是PUT到服务器，而state属性只是告诉开关上的外观和按钮上的初始化（开/关）。