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

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>）本身包含在主页中，这要归功于<ng-view> ？

或者pageslide-directive 可能需要<div pageslide ...> 及其父元素位于同一个文件中？

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

此外，将ng-controller="slideController as s" 添加到具有pageslide 属性的根<div> 并没有改变任何东西。

那么我怎样才能使这个工作与另一个文件中的菜单一起工作呢？

Answer 1

您是否尝试将<div ng-include="menu.html"></div> 替换为<div ng-include="'menu.html'"></div>。根据https://docs.angularjs.org/api/ng/directive/ngInclude，您必须将字符串常量用单引号括起来。

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>

这种方法给你更多的力量。所有逻辑都在指令控制器内，您每次都可以重用此元素。范围属性 checked 是主模板之间的“桥梁”，如果外部更改也会更改内部以及其他方式。