Question

当使用typescript编写并由指令调用的控制器时，绑定似乎不起作用。 这是指令

import controller = require('framework/frameworkController');

export class FrameworkDirective implements ng.IDirective {
 static instance(): ng.IDirective {
     return new FrameworkDirective;
 }
 controller = 'frameworkController';
 scope: any = {
    title: '@',
 };
  templateUrl = "controlslibrary/framework/frameworkTemplate.html"
}

这是控制器

 export class FrameworkController implements IFrameworkController {
      public isMenuButtonVisible: boolean = true;
      constructor(public $rootScope: ng.IRootScopeService, public $window: ng.IWindowService){
              var fc = this;
            $($window).on('resize.framework', () => {
                   $rootScope.$apply(() => {
                   fc.checkWidth();
                    });
            });
      }

      public checkWidth() {
           var width = Math.max($(this.$window).width(), this.$window.innerWidth);
           this.isMenuButtonVisible = !(width < 768);
      }
 }

这是模板网址

 <div ng-if="isMenuButtonVisible">
      <button type="button" class="btn nav-button">
              <i class="fa fa-bars"></i>
      </button>
 </div>

最后这是我的模块

  import controller = require('framework/frameworkController');
  import directive = require('framework/frameworkDirective');

  angular.module("framework", ['ui.router'])
   .controller("frameworkController", controller.FrameworkController)
   .directive("framework", directive.FrameworkDirective.instance);

调整窗口大小时，必须检查并调出按钮。我可以单步执行代码，它不会抛出任何错误，但绑定已被破坏。我究竟做错了什么？

Answer 1

感谢您的评论。我必须包含isMenuButtonVisible作为$ scope的属性才能使其工作。它不会绑定，除非它是$ scope的一部分。

 interface IFrameworkControllerScope extends ng.IScope {
       isMenuVisible: boolean;
 }

 export class FrameworkController 
 {
   $scope.isMenuButtonVisible = true;
   constructor({public $scope : IFrameworkControllerScope,  public $window: ng.IWindowService){

   $($window).on('resize.framework', () => {
        $scope.$apply(() => {
            checkWidth();
        });
    });

   var checkWidth = () =>{
        var width = Math.max($(this.$window).width(), this.$window.innerWidth);
        $scope.isMenuButtonVisible = !$scope.isMenuVisible;
    }
 }

打字机角度指令上的控制器

1 个答案: