Javascript AngularJS和Get ng单击以处理动态加载的html

我想知道我是否能在这里得到一些帮助。我正试图用AngularJS和Laravel建立一个小型图像库。到目前为止，一切进展顺利。然而，我遇到的问题是，当我动态加载一个HTML文件时，ng click指令似乎无法处理动态内容。我对此进行了研究，发现了$compile选项，但我一辈子都看不到如何实现它

有人知道我需要做什么吗？我已在下面附上我正在使用的代码：

控制器代码

App.controller('MyPhotos', function ($scope, $timeout, $http, $document, $modal, $log, $sce, $compile) {

$scope.loadAlbums = function () {

    $scope.loading = "<div class='text-center'><strong>...Loading...</strong></div>";
    $scope.isLoading = true;

    $http({
        method: 'GET',
        url: '/my/photos/fetch/albums'
    }).success(function (data) {
        var htmlContent = $compile(data.albums)($scope);
        $scope.galleryContent = $sce.trustAsHtml(data.albums);
        $log.log(data.albums);
        $scope.isLoading = false;
    }).error(function (data, status, headers, config) {
        //$scope.progress = data;
        $scope.messages = 'There was a network error. Try again later.';
        //$log.error(data);
        $scope.isLoading = false;
    });
};

<div class="row">
<div class="col-md-12">
    <ul class="list-inline">
        <li><a href="#photos-all" class="photosList">Your Photos</a></li>
        <li><a href="#albums" class="albumsList" data-ng-click="loadAlbums();">Your Albums</a></li>
    </ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
    <div ng-show="isLoading" class="text-center">
        <img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
    </div>
    <div class="photoContainer" data-ng-bind-html="galleryContent">
        [[ galleryContent ]]
    </div>
</div>
</div>

App.controller（'MyPhotos'，函数（$scope、$timeout、$http、$document、$modal、$log、$sce、$compile）{
$scope.loadAlbums=函数（）{
$scope.loading=“…加载…””；
$scope.isLoading=true；
$http({
方法：“GET”，
url:“/my/photos/fetch/albums”
}).成功（功能（数据）{
var htmlContent=$compile（data.albums）（$scope）；
$scope.galleryContent=$sce.trustAsHtml（data.albums）；
$log.log（data.albums）；
$scope.isLoading=false；
}).error（函数（数据、状态、标题、配置）{
//$scope.progress=数据；
$scope.messages='出现网络错误。请稍后再试'；
//$log.error（数据）；
$scope.isLoading=false；
});
};

基本Html页面

App.controller('MyPhotos', function ($scope, $timeout, $http, $document, $modal, $log, $sce, $compile) {

$scope.loadAlbums = function () {

    $scope.loading = "<div class='text-center'><strong>...Loading...</strong></div>";
    $scope.isLoading = true;

    $http({
        method: 'GET',
        url: '/my/photos/fetch/albums'
    }).success(function (data) {
        var htmlContent = $compile(data.albums)($scope);
        $scope.galleryContent = $sce.trustAsHtml(data.albums);
        $log.log(data.albums);
        $scope.isLoading = false;
    }).error(function (data, status, headers, config) {
        //$scope.progress = data;
        $scope.messages = 'There was a network error. Try again later.';
        //$log.error(data);
        $scope.isLoading = false;
    });
};

<div class="row">
<div class="col-md-12">
    <ul class="list-inline">
        <li><a href="#photos-all" class="photosList">Your Photos</a></li>
        <li><a href="#albums" class="albumsList" data-ng-click="loadAlbums();">Your Albums</a></li>
    </ul>
</div>
</div>
<div class="row">
<div class="col-md-12">
    <div ng-show="isLoading" class="text-center">
        <img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
    </div>
    <div class="photoContainer" data-ng-bind-html="galleryContent">
        [[ galleryContent ]]
    </div>
</div>
</div>

url（'img/loading_balls.gif'）}/>
[[galleryContent]]

动态加载的HTML

<div class="row">
<div class="col-md-3">
    <img src="http://placehold.it/700x400" alt="" class="img-responsive"  />
    <a href="#"><span class="fa fa-plus"></span> Create album</a>
</div>
@foreach($albums as $album)
    <div class="col-md-3">
        <img src="http://placehold.it/700x400" alt="" class="img-responsive"  />
        <a href="#" data-ng-click="loadAlbum({{ $album->id }})" title="{!! $album->title !!}"
           data-album-id="{{ $album->id }}">{!! $album->title !!}
        </a>
        <p>&nbsp;</p>
    </div>
@endforeach

@foreach（$albums作为$album）

@endforeach

动态加载内容时，data ng click指令不起作用

---

谢谢

您可以使用

ngInclude

以一种更简单的方式进行类似操作：

<div class="photoContainer" ng-include="'/my/photos/fetch/albums'">
    <img src="{{ Theme::asset()->url('img/loading_balls.gif') }}" />
</div>

url（'img/loading_balls.gif'）}/>

---

请参见

我认为您不需要为此使用

编译

。AngularJS和Laravel都使用双括号符号，这可能是您的问题。显然，您要求Laravel获取

{$album->id}

但它将由AngularJS进行解释。也许解决这个问题的一个好方法是从AngularJS向Laravel发送一个XHR请求，然后在

ng单击中使用javascript变量。尝试将
数据.相册
与
htmlContent
交换在
$scope.galleryContent=$sce.trustAsHtml>行上（data.albums）；
调出数据。带有htmlContent的albums返回以下错误：
错误：[$sce:itype]试图在需要字符串的内容中信任非字符串值：Context:html
ng bind html
可能正在清理html。使用jQuery或纯旧JavaScript将其插入DOM会更简单。完成此操作后，
$compile（addedElement）（$scope）
应该可以正常工作。@SteveCampbell，这解决了问题。最后只使用jquery显示html内容，ng click now可以正常工作。。。