Question

我有一个简单的指令，用于在其元素上实例化外部插件（Snap.js）：

var app = angular.module('plunker', []);
app
  .directive('sideMenu', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          var snapper = new Snap({
            element: element[0],
            disable: 'right'
          });
      }
    };
  });

这是使用此指令的方式：

  <div class="snap-drawers">
    ...
  </div>
  <div class="snap-content" side-menu>
    <div class="navbar navbar-fixed-top navbar-inverse high-z">
      <button id="open-menu" class="navbar-toggle pull-left" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="container main-content">
      Hello World
    </div>
  </div>

所以现在我有了这个带有id＆＃34;打开菜单＆＃34;这应该打开侧面菜单点击。打开菜单如下所示：

snapper.open('left');

什么是最好的，最有角度的＆＃39;让这个按钮访问＆＃39; snapper＆＃39;变量，所以它可以在点击时调用snapper.open？我想到的一个可能的解决方案是创建一个连接到此按钮的控制器，然后创建一个服务，该服务可以保存对象＆＃39; snapper＆＃39;并将此服务注入指令和控制器。代码如下所示：

var app = angular.module('plunker', []);
app
  .directive('sideMenu', function(snapper) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          snapper.initialize(element[0]);
      }
    };
  })
  .controller('btnCtrl', function($scope, snapper) {
      $scope.openMenu = function () {
          snapper.open(); 
      };
  })
  .service('snapper', function(){
      var self = this;
      this.initialize = function(element) {
          self.snap = new Snap({
              element: element[0],
              disable: 'right'
          });
      };
      this.openMenu = function() {
          self.snap.open('left');
      }
  });

      <button id="open-menu" class="navbar-toggle pull-left" type="button" ng-controller="btnCtrl">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

这是正确的方法吗？我是Angular的新手，我正在努力学习最佳实践。

这是一个plunker，您可以尝试使用正常的代码：plunker

角度和共享对象

0 个答案: