Question

我的数据库返回带有原始html字符串的字段。我想通过添加 ng-click =＆＃39; showImage（）＆＃39; 来修改元素。例如，原始的html是：

<p>
<img src="http://mywebsite.com/img-1.jpg" />
</p>

我的控制器中的源代码：

  var parser = new DOMParser();
  var doc = parser.parseFromString($scope.body, 'text/html');
  var images = doc.getElementsByTagName('img')
  for (var i = 0; i < images.length; i++ ) {
     var img = images[i];
     img.setAttribute('ng-click','showImage()');
     $scope.addImage(img.getAttribute('src'));
  }
  $scope.body = doc.documentElement.innerHTML;

结果是正确的：

<p>
<img src="http://mywebsite.com/img-1.jpg" ng-click="showImage()"/>
</p>

但是当我点击图片时收到以下错误消息：

未捕获的TypeError：范围。$ apply不是函数

为什么呢？有人可以帮忙吗？感谢。

编辑（控制器的完整源代码）：

(function() {
  'use strict';

  angular
    .module('App')
    .controller('DetailsController', DetailsController);

    DetailsController.$inject = ['$scope','$stateParams','ParseSvc','$controller'];

  function DetailsController($scope, $stateParams, ParseSvc, $controller) {

    $controller('BaseController', { $scope: $scope });

    $scope.article = JSON.parse($stateParams.article);

    activate();

    function activate() {
      var parser = new DOMParser();
      var doc = parser.parseFromString($scope.article.body, 'text/html');
      var images = doc.getElementsByTagName('img')
      for (var i = 0; i < images.length; i++ ) {
        var img = images[i];
        img.setAttribute('ng-click','showImages(' + i + ')');
        $scope.addImage(img.getAttribute('src'));
      }
      $scope.article.body = doc.documentElement.innerHTML;
    }
  }
})();

基础控制器：

(function() {
  'use strict';

  angular.module('App')
  .controller('BaseController', ['$scope','$ionicModal','$ionicSlideBoxDelegate','$ionicScrollDelegate',
  function($scope, $ionicModal, $ionicSlideBoxDelegate, $ionicScrollDelegate) {

    $scope.allImages = [];
    $scope.zoomMin = 1;

    $scope.addImage = function(src) {
      $scope.allImages.push({'src' : src});
    }

    $scope.showImages = function(index) {
      $scope.activeSlide = index;
      $scope.showModal('templates/gallery-zoomview.html');
    }

    $scope.showModal = function(templateUrl) {
      $ionicModal.fromTemplateUrl(templateUrl, {
        scope: $scope,
        animation: 'slide-in-up'
      }).then(function(modal) {
        $scope.modal = modal;
        $scope.modal.show();
      });
    };

    // Close the modal
    $scope.closeModal = function() {
      $scope.modal.hide();
      $scope.modal.remove();
    };

    $scope.updateSlideStatus = function(slide) {
      var zoomFactor = $ionicScrollDelegate.$getByHandle('scrollHandle' + slide).getScrollPosition().zoom;

      if (zoomFactor == $scope.zoomMin) {
        $ionicSlideBoxDelegate.enableSlide(true);
      } else {
        $ionicSlideBoxDelegate.enableSlide(false);
      }
    }

  }]);

})();

在ionic中修改html元素

0 个答案: