如果我更改指令的名称，自定义指令不起作用答案

【问题标题】：Custom directive not working if i change the name of the directive如果我更改指令的名称，自定义指令不起作用
【发布时间】：2017-03-21 17:21:46
【问题描述】：

我尝试实现一个窗口调整大小自定义指令，它工作正常。

问题是它只有在我使用指令名称作为调整大小时才有效。否则，如果我使用不同的名称作为窗口大小，它只会在页面刷新时触发。

这里是控制器代码

  var app = angular.module('miniapp', []);

function AppController($scope) {
    /* Logic goes here */
}

> > app.directive('windowsize', function($window){
>         return function(scope,element){
>             var w=angular.element($window);
>             scope.getWindowDimension=function(){
>                 return{
>                      'w': w.width()
>                 };
>             };
>              scope.$watch(scope.getWindowDimension, function (newValue, oldValue) {
>              scope.windowWidth = newValue.w;
>              console.log( scope.windowWidth);
> 
>         }, true);
>               w.bind('windowsize', function () {
>             scope.$apply();
>         });
>        };
>      })



html code
<div ng-app="miniapp" ng-controller="AppController"  windowsize>
    window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}
    <br />
</div>

【问题讨论】：

刷新前有什么错误吗？
你应该尝试 w.bind('resize') 而不是 w.bind('windowsize')
我没有收到任何错误。如果我替换指令名称 windowssize 来调整大小它工作正常。 @SaEChowdary
为什么我不能使用 windowssize 而不是调整 @Ashish panchal 的大小
@SanjayHp ：您正在绑定一个事件，我想没有像 windowssize 这样的事件，这就是原因。希望它对你有用。

标签： angularjs angularjs-directive

【解决方案1】：

var app = angular.module('miniapp', []);

function AppController($scope) {
    /* Logic goes here */
}

 app.directive('windowsize', function($window){
         return function(scope,element){
             var w=angular.element($window);
             scope.getWindowDimension=function(){
                 return{
                      'w': w.width()
                 };
             };
              scope.$watch(scope.getWindowDimension, function (newValue, oldValue) {
              scope.windowWidth = newValue.w;
              console.log( scope.windowWidth); 
         }, true);
               w.bind('resize', function () {
             scope.$apply();
         });
        };
      })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
html code
<div ng-app="miniapp" ng-controller="AppController"  windowsize>
    window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}
    <br />
</div>

在此示例中，您所做的一切都是正确的，但有一个小错误，您绑定事件 windowresize 不是事件，因此请使用 resize 并尝试它（我只纠正宽度）

【讨论】：