Question

$scope.retryTask = function(e) {
        console.log(e);
    };

$("#showloader").replaceWith(
                    $compile(
                    "<span class='iconexclaim'><img src='images/backupiconexclaim.jpg' /></span><span class='retry-btn' ng-click='retryTask(this)'>Retry</span>"
            )($scope)
);

e的值意外地得到控制器的范围，而不是我点击的图像jquery对象。）;

Answer 1

我正在回答您的具体问题，但继续阅读，因为这不是创建Angular应用程序的方法。

要获取DOM元素，您需要传递Angular为您创建的$event局部变量：

<span class='retry-btn' ng-click='retryTask($event)'>Retry</span>

然后，您可以使用$event.currentTarget：

获取元素

$scope.retryTask($event){
   var target = $event.currentTarget;
}

更长的版本

你不是“在Angular中思考”，所以，请先阅读以下SO问题/答案："Thinking in AngularJS" if I have a jQuery background?"

简而言之，忘记控制器中的DOM，只使用ViewModel。

在您的情况下，您需要在加载某些内容时显示一个简单的加载器。因此，使用$scope.isLoading变量表示该变量，并在任务运行或完成时将其设置为true / false。然后，您的观点可以做出相应的反应（使用ng-show / ng-hide或ng-if）：

.controller("MainCtrl", function($scope, SomeSvc){
  // do some async task right away
  doTask();

  $scope.retryTask = function(){
    doTask();
  };

  function doTask(){
    // before start, set to true
    $scope.isLoading = true;
    SomeSvc.doTask()
           .then(function(data){
              $scope.data = data; // if needed
           })
           .finally(function(){
              // when finished, set to false
              $scope.isLoading = false;
           });
  }
})

让View由ViewModel“驱动”：

<div ng-show="isLoading">loading...</div>
<div ng-hide="isLoading">
   {{data}}
</div>

$ compile返回范围而不是当前元素引用

1 个答案: