Question

我已经编写了一个扩展offcanvas库的服务。这一切都是花花公子但是我似乎无法将状态对象传播到我的控制器。

我正在关注状态的变化但似乎没有发生任何事情。

(function(){
'strict'
  var state =  {visibility: 'HIDDEN'};
  var closeWidth = 800;

  var defaultSettings = {
    autoHide: false,
    recalc: true,
    toggle: true,
  }

  var getState = function(){
    return state;
  };

  var show = function (){
    if (state.visibility === 'HIDDEN') $(".navmenu").offcanvas('show');
  };

  var hide = function (){
    if (state.visibility === 'VISIBLE') $(".navmenu").offcanvas('hide');
  };

  var config = function(){
    $(".navmenu").offcanvas(defaultSettings);
  };

  var setListeners = function(element){
    element.on('show.bs.offcanvas', function(){
      state.visibility = 'VISIBLE';
      console.log(getState());
    });

    element.on('hide.bs.offcanvas', function(){
      state.visibility = 'HIDDEN';
      console.log(getState());
    });

    $(window).on('resize', function(){
      if ($( document ).width() > 900) hide();
    });
  }

angular.module("offCanvasService",[])

.service('OffCanvasService', function(){
//console.log($scope);

  return {
    config:config,
    hide:hide,
    show:show,
    setListeners:setListeners,
    toggle:function(){
      $(".navmenu").offcanvas('toggle');
    },
    getState:getState
 };
});


})();

(function(){
'strict'
  angular.module('clockOn')
  .controller('NavItemsController', [ 'OffCanvasService', '$scope',
  function(OffCanvasService,$scope){
    this.state = OffCanvasService.getState();

    $scope.$watch(
      OffCanvasService.getState()
    ,
     function(newValue, oldValue){
       console.log(oldValue);
       console.log(newValue);
       console.log('state has changed');
     }
   );

  this.OffCanvasService = OffCanvasService;

  }]);

})();

模板

  <ul class="nav navmenu-nav navbar-nav" mobile-List>
    <li class="nav-item" ng-click='navItemCtrl.OffCanvasService.hide()'><a ng-href="/#/preferences"><span class="glyphicon glyphicon-cog" aria-hidden="true"></span></a></li>
    <li class="nav-item"><a href="#" ng-click="logout()"><span class="glyphicon glyphicon-log-out" aria-hidden="true"></span></a></li>
  </ul>

和指令

(function(){
  angular.module('layout-components',[])

  .directive('menuItems', function(){
    return {
      restrict: 'E',
      templateUrl: "../views/menu-item.html",
      controller: 'NavItemsController',
      controllerAs: 'navItemCtrl'
    }
 })

.directive('canvaseMenu', function(){
  return {
    restrict: 'E',
    templateUrl: "../views/canvase-menu.html",
    controller: 'NavMenuController',
    controllerAs: 'NavMenuController'
  }
});
})();

Answer 1

替换

$scope.$watch(
      OffCanvasService.getState
    ,

带

<body>
<form onsubmit="return handleSubmit(this)" id="form1">
  <h1>Choose your words!</h1>
  <fieldset>
    <label>First Noun: <input type="text" name="noun1" ></label><br>
    <label>Second Noun: <input type="text" name="noun2"></label><br>
    <label>First Adjective: <input type="text" name="adjective1"></label><br>
    <label>Second Adjective: <input type="text" name="adjective2"></label><br>
    <label>First Verb: <input type="text" name="verb1"></label><br>
    <label>Second Verb: <input type="text" name="verb2"></label><br>
  </fieldset>
  <button type="submit" id="pushMe">Create Mad Lib</button>
</form>
<div id="placeholder">

</div>

从文档中，watchExpression必须是

string：评估为表达式

function（scope）：以当前范围作为参数调用。

Answer 2

我必须将我的函数移到服务声明中，并将getter函数包装在promise中。我很确定如果有人有一个更好的解决方案

新服务

(function(){
'use strict'
angular.module("offCanvasService",[])

.service('OffCanvasService', function($q){

var self = this;

this.state =  {visibility: 'HIDDEN'};
this.closeWidth = 800;

this.defaultSettings = {
  autoHide: false,
  recalc: true,
  toggle: true,
};

this.getState = function(){
  var deffered = $q.defer()

    if(typeof self.state !== 'undefined') {
      deffered.resolve(self.state);
    } else {
      deffered.reject('state is undefined');
    }

  return deffered.promise;
};

this.show = function (){
  if (self.state.visibility === 'HIDDEN') $(".navmenu").offcanvas('show');
};

this.hide = function (){
  if (self.state.visibility === 'VISIBLE') $(".navmenu").offcanvas('hide');
};

this.config = function(){
 $(".navmenu").offcanvas(self.defaultSettings);
};

this.setListeners = function(element){
  element.on('show.bs.offcanvas', function(){
    self.state.visibility = 'VISIBLE';
    self.getState().then(function(response){
    });
  });

  element.on('hide.bs.offcanvas', function(){
    self.state.visibility = 'HIDDEN';
    self.getState().then(function(response){
    });
  });

  $(window).on('resize', function(){
    if ($( document ).width() > 900) self.hide();
  });
}

return {
  config:self.config,
  hide:self.hide,
  show:self.show,
  setListeners:self.setListeners,
  toggle:function(){
    $(".navmenu").offcanvas('toggle');
  },
  getState:self.getState
};
});


})();

$ scope。$ watch（）没有获取服务对象的更改

2 个答案: