在 angularjs 的自定义指令的 $watch 中不评估表达式

Posted 2023-05-09

【中文标题】在 angularjs 的自定义指令的 $watch 中不评估表达式

【英文标题】：Expressions are not evaluated in $watch of custom directive of angularjs

【发布时间】：2012-09-26 17:40:07

【问题描述】：

我在 angularjs 中有一个下面的自定义指令，它使用从服务器更新的模型， 我添加了一个 watch listener 来观察那个模型的变化，

var linkFn;
linkFn = function(scope, element, attrs) 
        scope.$watch('$parent.photogallery', function(newValue, oldValue) 
            if(angular.isUndefined(newValue)) 
            return;
        
        var $container = element;
        alert($container.element);
        $container.imagesLoaded(function() 
            $container.masonry(
            itemSelector : '.box'
                );
            );
        );
    ;
    return 
        templateUrl:'templates/Photos_Masonry.htm',
        replace: false,
        transclude:true,
        scope: 
            photogallery: '=photoGallery',
        ,
        restrict: 'A',
        link: linkFn

但是，当我在 watch 指令中调试时，我仍然看到模板中的表达式仍未解决。即photo.label, ng-src 都还没有解决。 AFIK，$digest 只会在 $eval 之后被调用。这是预期的行为吗？ 由于这个原因，我的 jQuery 调用不起作用？是否有任何其他事件可以让我获得带有评估表达式的结果元素？

这是我的模板，里面有 ng-repeat，

<div id="container" class="clearfix">
    <div class="box  col2" ng-repeat="photo in photogallery">
        <a ng-href="#/viewphotos?id=photo.uniqueid&&galleryid=galleryid"
            title="photo.label"><img
            ng-src="photo.thumbnail_url"   class="fade_spot" /></a>
        <h3>
            <span style="border-bottom: 1px solid black;font-weight:normal;font-size:14px;">galleryname</span>
        </h3>
        <h3>
            <span style="color:#20ACB8;font-weight:normal;font-size:17px;">photo.seasonname</span>
        </h3>
    </div>
</div>

相册在父控制器中初始化，

function MyCtrlCampaign($scope, srvgallery, mygallery) 

    $scope.updatedata = function() 
        $scope.photogallery     = srvgallery.getphotos($routeParams);
    ;

    $scope.getphotos = function() 
        srvgallery.photos().success(function(data) 
            $scope.updatedata();
        ).error(function(data) 

        );
    ;

指令的使用方式如下，

<div masonry photo-gallery="photogallery" >
            </div>

请让我知道您对此的看法。

【问题讨论】：

我不清楚相册的初始化位置

嗨，Roy，照片库已在父控制器中初始化。

Roy，也更新了包含这些细节的问题。

【参考方案1】：

您的Github issue 中似乎已解决此问题（为方便他人而发布）。