Angular：如何使用ng-if或其他Angular指令从HTML视图中调用控制器函数

debugcn 发表于 Dev

我在途中

我的问题是；当条件满足/等于true时，ng-if或者使用其他Angular指令，如何从我的观点调用控制器函数？

像这样的东西：

<div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>

这是我要实现的目标：

当我的数据已加载并通过我的API调用检索到后，我想将$scope变量（$scope.dataHasBeenLoaded = true;）设置为true。当此$scope变量=== true时，它将在我的DOM中求值，然后configureWordCloudGraph()在我的控制器中调用一个函数：

$scope.configureWordCloudGraph = function () {

    if ($scope.dataHasBeenLoaded) {
        var data = $scope.wordCloudData;
        $scope.twitterProfileWords = WordCloud.setUpTags(data.words);
    }

}

这是我的看法：

<div ng-controller="TwitterWordCloudController">
    <div id="word">
        <og-data-box heading="Most used words on Twitter" link="" uid="socialMentionsMeta" description="">
            <div class="dataStatus" ng-show="!dataContent">{{dataStatus}}<og-loading-indicator></og-loading-indicator></div>
            <div class="dataContent" ng-show="dataContent" ng-mouseover="showGraphTrainingInfo()">
                <og-word-cloud words="twitterProfileWords"></og-word-cloud>
                <div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>
            </div>
        </og-data-box>
    </div>
</div>

我在途中

根据selvassn的评论，从HTML视图中调用Angular控制器的方式如下：

注意：我将把它分解为3部分代码。只是HTML方法调用，控制器方法，包括控制器方法调用的完整HTML代码。

只是HTML控制器方法调用代码：

<div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>

控制器方式：

$scope.configureWordCloudGraph = function () {

    if ($scope.dataHasBeenLoaded) {
        var data = $scope.wordCloudData;
        $scope.twitterProfileWords = WordCloud.setUpTags(data.words);
    }

}

HTML视图Controller方法调用：

<div ng-controller="TwitterWordCloudController">
    <div id="word">
        <og-data-box heading="Most used words on Twitter" link="" uid="socialMentionsMeta" description="">
            <div class="dataStatus" ng-show="!dataContent">{{dataStatus}}<og-loading-indicator></og-loading-indicator></div>
            <div class="dataContent" ng-show="dataContent" ng-mouseover="showGraphTrainingInfo()">
                <og-word-cloud words="twitterProfileWords"></og-word-cloud>
                <div ng-if="dataHasBeenLoaded == 'true'" ng-init="configureWordCloudGraph()"></div>
            </div>
        </og-data-box>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。