打字稿角度指令上的控制器答案

【问题标题】：controller on a typescript angular directive打字稿角度指令上的控制器
【发布时间】：2015-07-19 22:27:15
【问题描述】：

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

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);

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

【问题讨论】：

我会将控制器更改为注入 $scope，然后使用 $scope.$on('resize.framework',()=>{...code...})。不确定这是否可行，但我会以它为起点进行测试。你能把你的代码放在一个要点里，这样我就可以摆弄它了吗？
resize.framework 触发并且工作正常，这是绑定不起作用。我应该使用 $scope 绑定到控制器的视图，只是为了指令？代码在我的办公网络中，不允许使用要点。
指令本身的范围内似乎没有“isMenuButtonVisible”。我不确定以下是否可行，因为我以前从未尝试过这种方式：您是否尝试向指令添加链接函数以访问指令中的控制器：link = (scope, element: ng.IAugmentedJQuery, attrs: any, controller: controller.FrameworkController) => { scope.isMenuButtonVisible = controller.isMenuButtonVisible; }
你确定return new FrameworkDirective; 没有给你语法错误？
可能在控制器中注入$scope 并使用$scope.$apply 而不是$rootScope.$apply（虽然不确定）。此外，在 checkWidth 方法中的代码中添加一个中断。我认为this 可能指的是窗口而不是控制器，因此属性可能与您的想法不同。

标签： angularjs angularjs-directive typescript angularjs-controller

【解决方案1】：

感谢 cmets。我必须将 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;
    }
 }

【讨论】：