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

我在途中

我的问题是;当条件满足/等于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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从具有不同类的其他视图控制器中调用函数

Angular指令调用父控制器函数

如何从控制器调用指令函数?

Angular视图中的控制器定义

Angular JS:如何在Angular指令中从控制器的链接内部调用函数

如何从其他控制器AngularJS调用控制器中的函数

AngularJS如何从其他视图的控制器更改视图中的文本

Angular - 对指令控制器范围的更改未反映在视图中

如何在其他控制器的视图中显示计数

Angular1.3:在使用controllerAs的视图中,从标准控制器访问函数。

如何在Laravel 5的视图中调用控制器函数

Angular Js多次调用控制器方法并在视图中显示输出

Angular JS-在外部控制器中调用指令函数

如何通过一个控制器在不同的视图中调用同一指令

如何从 Laravel 视图中的链接调用控制器方法?

如何从视图中调用控制器方法

使用Javascript在视图中未调用控制器操作

我们如何在其他控制器视图中使用一个控制器方法?

如何调用在其他控制器中定义的函数?

如何在Angular 1.7控制器中正确使用$ interval自动刷新视图中的数据?

如何将数据从视图控制器传递到其他视图控制器

codeigniter-使用模型导致控制器调用模型中的其他函数

Angular 指令将参数传递给元素的 .html() 中的控制器函数

如何从其他视图控制器访问参考插座?

在具有不同控制器的视图内使用ng-click和指令函数

使用Html.ActionLink在其他控制器上调用动作

从Angular指令内的ng-click中调用父控制器中的方法

AngularJS:使用在控制器/指令中其他位置定义的自定义javascript函数

如何与其他控制器共享控制器操作/视图