Question

如果您创建一个动态加载HTML内容的指令，那么您似乎无法从该生成的HTML中调用该指令的函数。我的猜测是，内容需要在指令生成之后进行链接。我尝试在更改动态内容后编译元素，但这并没有帮助。该函数永远不会被调用。有没有办法做到这一点？（非常感谢提前！）

在下面的代码中，您可以看到指令模板中对doIt（）函数的静态调用。这样可行。但是，在动态内容中调用相同的函数并不起作用。

这是调用我的指令的元素：

<issue obj="obj" label="Make Dynamic Content"></issue>

这是我的指示：

(function () {
angular.module('myModule').directive('issue', function ($compile, $sce) {
    return {
        restrict: 'EA',
        scope: {
            label: '@',
            obj: '='
        },
        templateUrl: 'components/docs/docs.issue.html',
        link: function (scope, element, attrs){

            scope.theLabel = attrs.label;

            scope.doIt = function() {
                alert("DOIT CALLED FROM WITHIN ISSUE");
            };

            scope.showIssue = function() {
                // THIS CALL TO doIt() FAILS -- NEVER GETS CALLED...
                var s = '<p>Dynamic content: <br><a href="" ng-click="doIt()">Click Me</a></p>';
                scope.obj = {content: $sce.trustAsHtml(s)};
                jQuery('#issue-panel').show();
                $compile(element)(scope);
            };
        }
    };
});
}).call(this);

这里是指令的HTML模板...... {{theLabel}}会说＆＃34;制作动态内容＆＃34;。单击它时，它会在obj.content中生成动态内容。我有一个静态调用doIt（），它显示在生成的内容之上。

<div id="win-container">
<a href="" ng-click="showIssue()">
    {{theLabel}}
</a>
<div id="issue-panel">
    <div class="topicWin-content">
        <!-- THIS CALL TO doIt() WORKS... -->
        <p>Static content:<br> <a href="" ng-click="doIt()">Static Click</a></p>
        <div ng-bind-html="obj.content"></div>
    </div>
</div>
</div>

Answer 1

我想我可以解决这个问题。我只是暴露了我想在我的指令中调用的函数，然后在调用我想要的函数的模板中实现一个任意函数。然后我在生成的内容中的函数只调用那个任意函数。从技术上讲，这不是我要求做的，但它完成了工作......我可以生成内容，然后从生成的内容中调用我的指令。

要调用该指令，请执行此操作 - 请注意func属性：

<issue id="cudTest" obj="obj" func="func" label="Make Dynamic Content"></issue>

然后指令看起来像这样：

(function () {
angular.module('myModule').directive('issue', function ($compile, $sce) {
    return {
        restrict: 'EA',
        scope: {
            label: '@',
            func: '=',
            obj: '='
        },
        templateUrl: 'components/docs/docs.issue.html',
        link: function (scope, element, attrs){

            scope.obj = {};

            scope.theLabel = attrs.label;

            scope.doIt = function(s) {
                alert("DOIT CALLED FROM WITHIN ISSUE: "+s);
            };

            scope.func = scope.doIt;

            scope.showIssue = function() {
                // THIS CALL TO doIt() WORKS!!!
                var arg = "'This is a template call from dynamically generated content!'";
                var s = s+'<p>TEST content: <br><a onclick="javascript:templateCall('+arg+')">TEST Click Me 2!</a></p>';
                scope.obj.content = $sce.trustAsHtml(s);
                jQuery('#issue-panel').show();
            };
        }
    };
});
}).call(this);

最后，模板看起来像这样......我可以更聪明地找到指令元素，但为此我使用了ID：

<script type="text/javascript">

var templateCall = function(s) {
    var thisElem = document.getElementById("cudTest");
    var myScope = angular.element(thisElem).scope();
    myScope.$apply(function() {
        myScope.func(s);
    });
}
</script>

<a href="" ng-click="showIssue()">{{theLabel}}</a>
<!-- THIS CALL TO doIt() WORKS... -->
<p>Static content:<br>
<a ng-click="doIt('This is a static call')">Static Click</a></p>
<div ng-bind-html="obj.content"></div>

AngularJS - 如何在ng-bind-html的动态内容中调用指令函数？

1 个答案: