渲染后角度连接jQuery插件

Question

我创建了一个指令ngAfterRender，我正试图用它来连接fancybox:

模板

<div ng-after-render="wireUpFancyBox($event)" ng-bind-html="Content"></div>

指令

.directive('ngAfterRender', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $timeout(function () {
                scope.$eval(attrs.ngAfterRender, { $element: element });
            });
        }
    };
}]);

控制器

    $scope.wireUpFancyBox = function ($element) {
        $element.find('a').fancybox($.extend(true, {}, fancyboxOptions, {
            scrolling: 'auto',
            type: 'inline'
        }));
    };

不幸的是，当HTML Content绑定发生更改时，wireUpFancyBox()方法不会被调用。

我在这里能做什么？

Answer 1

如果您希望每次ng-bind更改时都调用wireUpFancyBox，那么您需要类似于此的东西

myApp.directive('ngAfterRender', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch(function () {
                return scope.$eval(attrs.ngBindHtml);
            },
            function (value) { 
               $timeout(function () {   
                  scope.$eval(attrs.ngAfterRender, { $element: element });
               });
            });
        }
    };
}]);

在这里，我们观察评估的ng-bind-html表达式，然后在更改时触发eval。

小提琴