javascript - 外部化 View 的指令不起作用

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>

另外，这是相关的 Controller :

'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"到根<div>与 pageslide属性没有改变任何东西。

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

Answer 1

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