$ watch vs ng-if performance

Question

我试图在AngularJS应用程序中获取有关性能的信息。我想知道使用$watch或ng-if之间是否存在任何性能差异，因为我们可以使用其中一个来获得相同的结果/行为。

请注意，我仅使用$watch 检查数据是否已加载。该指令不需要监视未来的数据更改

作为示例，我们假设我们有一个控制器，它从Ajax请求和需要此数据的指令中检索数据。

使用$watch

控制器

angular.module('myApp').controller(   
    'MyController',
            ['$scope',  'MyService',
                function ($scope , MyService) {

                    $scope.myObj = {}

                    // http request
                    MyService.getData( function (result) {
                        $scope.myObj.myData = result
                    })
                }
            ]
);

指令

  angular.module('app').directive(
       'myCustomDirective',
       [ function () {

       return {
           restrict: 'E',
           scope : {
               data : '='  // the data provided by the MyController
           },
           link: function (scope, element, attrs) {

                // watching changes on data
                var myWatcher = $scope.$watch(data, function(value) {
                   if(value) {
                       // do something with data    

                       myWatcher(); //kill watcher
                   }
                });
           },

           templateUrl: '/myTemplate.html'
       };
   }]);

HTML文件

<div ng-controller="myController">
    <div>
        <my-custom-directive data="myObj.myData"></my-custom-directive>
    </div>
</div>

使用ng-if

控制器（无变化）

angular.module('myApp').controller( 
    'MyController',
            ['$scope',  'MyService',
                function ($scope , MyService) {

                    $scope.myObj.myData = {}

                    // http request
                    MyService.getData( function (result) {
                        $scope.myObj.myData = result
                    })
                }
            ]
);

该指令（删除$ watch）

  angular.module('app').directive(
       'myCustomDirective',
       [ function () {

       return {
           restrict: 'E',
           scope : {
               data : '='
           },
           link: function (scope, element, attrs) {
               // do something width data   
           },

           templateUrl: '/myTemplate.html'
       };
   }]);

HTML文件（添加ng-if指令）

<div ng-controller="myController">
    <div ng-if="myObj.myData">
        <my-custom-directive data="myObj.myData"></my-custom-directive>
    </div>
</div>

所以我的问题是：

1. 在表现方面有什么不同吗？
2. 由于它对内存/性能的要求很高，是否有另一种/更好的方法可以避免在特定情况下使用$ watch（内部指令来观察控制器的$ scope ） ？

非常感谢任何建议。

Answer 1

https://github.com/angular/angular.js/blob/f4fb6e0983a6a700dc4a246a913504550b55f1e9/src/ng/directive/ngIf.js

  

    

$ scope。$ watch（$ attr.ngIf，function ngIfWatchAction（value）....

  

所以ng-if使用$ watch，大多数angular指令都可以。所以没有真正的区别。

但是创建已经实现的东西的指令是没有意义的。所以一般情况下，最好使用角度内置指令，如果你需要新东西 - 不要害怕使用$ watch。