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

Question

我的问题是；当条件 met/equates 为真时，如何使用 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>

Answer 1

简单的方法可以是观察 dataHasBeenLoaded 并在 true 时启动 configureWordCloudGraph：

var deregister = $scope.$watch('dataHasBeenLoaded', function() {
    if($scope.dataHasBeenLoaded) {
         configureWordCloudGraph();
         deregister();
    }
})

Answer 2

根据 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 查看控制器方法调用：

<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>

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

Angular: How can I call a controller function from an HTML view using ng-if or another Angular directive

javascript

angularjs

angularjs-controller