Question

我正在加载angular-service的模板，但除非我使用template，否则不会更新$rootScope.$appy()。但我的问题是，这样做这是更新模板的正确方法吗？

这是我的代码：

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

app.service('modalService', function( $rootScope ) {


  this.hide = function () {

    this.show = false;


  }

  this.showIt = function () {

    this.show = true;

  }

  this.setCategory = function ( category ) {

     return this.showPath = category+'.html'

  }

  this.showCategory = function (category) {

    this.setCategory( category )
    $rootScope.$apply(); //is this correct?
  }

})

app.controller('header', function($scope) {

  $scope.view = "home view";

});

app.controller('home', function($scope, modalService) {

  $scope.name = 'World';
  $scope.service = modalService; 

});

//header directive

app.directive('headerDir', function( modalService) {

  return {
      restrict : "E",
      replace:true,
      templateUrl:'header.html',
      scope:{},
      link : function (scope, element, attrs) {


         element.on('click', '.edit', function () {
            modalService.showIt();
            modalService.showCategory('edit');
         });

         element.on('click', '.service', function () {
           modalService.showIt();
           modalService.showCategory('service');

         })

      }
  }

});

app.directive('popUpDir', function () {

  return {
    replace:true,
    restrict:"E",
    templateUrl : "popup.html"
  }

})

如果我在这里错了，请告诉我吗？或者任何人都可以告诉我这样做的正确方法吗？

点击顶部的链接以获取要加载的相应模板。然后单击背景屏幕关闭。

Live Demo

Answer 1

如果您不使用Angular的错误处理，并且您知道您的更改不应传播到任何其他范围（根，控制器或指令），并且您需要针对性能进行优化，你可以专门用你的控制器的$ scope来调用$ digest。这样脏检查就不会传播。否则，如果您不希望Angular捕获错误，但需要将脏检查传播到其他控制器/指令/ rootScope，您可以使用$ apply包装，而不是使用$ apply包装，只需调用$ rootScope。$ apply （）你做了改动之后。

请参阅此链接Angular - Websocket and $rootScope.apply()

Answer 2

使用 ng-click 来处理点击事件。

模板：

<div ng-repeat="item in items">
  <div ng-click="showEdit(item)">Edit</div>
  <div ng-click="delete(item)">Edit</div>
</div>

控制器：

....
$scope.showEdit = function(item){
....
}
$scope.delete = function(item){
....
}

如果使用jquery或任何其他外部库并修改$ scope，则angular无法知道某些内容是否已更改。相反，如果使用ng-click，则在ng-click处理程序完成后让角度跟踪/检测更改。

这也是角色的方式。只有在没有其他方法来拯救世界时才使用jquery。

服务仅在`$ rootScope。$ appy（）`应用后才有效

2 个答案: