Question

当我点击图标时，我正在使用pageslide directive来显示横向滑动菜单。

这是通常的方法，它的工作：

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
          <div pageslide ps-open="s.isActive" ps-side="left">
            <div style="padding:20px">
              <h2>Hello Pageslide</h2>
              <p>Put here whatever I want in the lateral menu</p>
              <a ng-click="s.toggle()" class="button" >Close</a>
            </div>
          </div>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

但是我会在外部模板中制作菜单内容，所以我正在尝试这个：

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
    <menu-item isActive="s.isActive"></menu-item>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

将其作为menu.html：

<div pageslide ps-open="s.isActive" ps-side="left">
  <div style="padding:20px">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever I want in the lateral menu</p>
    <a ng-click="s.toggle()" class="button" >Close</a>
  </div>
</div>

另外，这是相关的控制器：

'use strict';

angular.module('BalrogApp').controller('slideController', function(){

  this.isActive= false; // This will be binded using the ps-open attribute

  this.toggle = function(){
    this.isActive= !this.isActive
  }

});

和<menu-item>指令：

angular.module('BalrogApp').directive('menuItem', function () {
  return {
    restrict: 'E',
    templateUrl: "views/menu.html",
    scope: {
      isActive: '='
    },
    controller: 'slideController',
    controllerAs: 's',
    bindToController: true
  }
});

所以它不是这样工作的，也许是因为主视图（包括<menu-item＆gt;）本身包含在主页中，感谢<ng-view>？

或许pageslide-directive要求<div pageslide ...>及其父元素位于同一个文件中？

我可以从控制台告诉toggle()被调用并在两种情况下都更改isActive但是它没有打开带有指令版本的菜单。

此外，将ng-controller="slideController as s"添加到具有<div>属性的根pageslide并未发生任何变化。

那么如何使用另一个文件中的菜单来完成这项工作呢？

Answer 1

您是否尝试将<div ng-include="menu.html"></div>替换为<div ng-include="'menu.html'"></div>。根据{{3}}，你必须用单引号包装字符串常量。

Answer 2

我强烈建议您不要使用ng-include。您可以使用相反的方法获得相同的方法。

例如：

菜单html

<div pageslide ps-open="vm.checked" ps-side="left">
  <div style="padding:20px">
    <h2>Hello Pageslide</h2>
    <p>Put here whatever I want in the lateral menu</p>
    <a ng-click="vm.toggle()" class="button" >Close</a>
  </div>
</div>

指令：

function Controller() {
}

Controller.prototype.toggle = function() {
  this.checked = !this.checked;
}

angular
  .module('BalrogApp')
  .directive('menuItem', function() {
    return {
      templateUrl: 'urltomenu.html',
      restrict: 'E',
      scope: {
        checked: '='
      },
      controller: Controller,
      controllerAs: 'vm',
      bindToController: true
    }
  })

主要模板

<div class="navbar-header">
  <span ng-controller="slideController as s">
    <a class="navbar-brand" href="javascript:void(0)"
       ng-click="s.toggle()"><i class="fa fa-bars fa-lg"></i></a>
    <menu-item checked="s.checked"><menu-item>
  </span>
  <a class="navbar-brand text-danger" href="javascript:void(0)">Balrog</a>
</div>

这种方法可以为您提供更多动力。所有逻辑都在指令控制器内，您可以每次重用此元素。范围属性已检查是主模板之间的“bridge”，如果外部更改也在内部更改，也是另一种方式。

外部化视图不起作用的指令

2 个答案: