$scope问题.更改未显示在 HTML 视图中

$scope issue. Changes not been displayed in HTML view

本文关键字：HTML 视图 显示 scope 问题      更新时间：2023-09-26

>伙计们，我是Angular的新手，我遇到了一些问题：

现在我正在使用ngJsTree，我正在覆盖"selectNodeCB"方法，该方法只是在你从树中选择一个节点时做一些事情。在我的控制器中看起来像这样： 

$scope.test = "Hellow World"
...
function selectNodeCB(event, data) {
        debugger;
        $scope.test = "Goodbye World";
}

现在，当我在 UI 中选择一个节点时，我们将在调试器上停止。$scope.test更改为"再见世界"，仅此而已。方法完成后，不会对 UI 显示任何更改 （HTLM vieiw）。

我相信这与"selectNodeCB"函数的无$scope外观有关，因为当我这样做时：

$scope.testFnc = function () {
        $scope.test = "Goodbye World";
};

我将其设置为单击某些按钮，它可以完美运行。我也尝试从它执行的"selectNodeCB"调用"testFnc"，但在 HTML 中当然没有任何变化。

我

确信我忘记了一些非常明显的事情，所以如果有人能给我小费，我会很高兴。

好人，我发现 answear 这是 HTML 视图中的问题： 

            <div class="portlet-body">
                <div class="container" ng-controller="EditPrizeTableCtrl as vm">
                    <div class="row" cg-busy="vm.promise">
                        <toaster-container></toaster-container>
                        <div class="col-xs-6">
                            <div class="panel-body">
                                <div id="ptTree" js-tree="treeConfig" should-apply="ac()" ng-model="treeData"
                                     tree="treeInstance" tree-events="ready:readyCB;select_node:selectNodeCB"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            ......
            <div> {{test}} </div>

现在的解决方案是这样的：如果 {{test}} 在容器之外 

<div class="container" ng-controller="EditPrizeTableCtrl as vm"> ... </div>

它不起作用。如果你把 {{test}} 放在里面： 

<div class="container" ng-controller="EditPrizeTableCtrl as vm"> {{test}} ... </div>

工作正常。但这不是一个通用的解决方案。所以你不能做变量"vm"，而只是在容器中需要它的地方使用"EditPrizeTableCtrl"：

         <div class="portlet-body">
            <div class="container">
                <div class="row" cg-busy="EditPrizeTableCtrl.promise">
                    <toaster-container></toaster-container>
                    <div class="col-xs-6">
                        <div class="panel-body">
                            <div id="ptTree" js-tree="treeConfig" should-apply="ac()" ng-model="treeData"
                                 tree="treeInstance" tree-events="ready:readyCB;select_node:selectNodeCB"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        ......
        <div> {{test}} </div>

这样它就完美了！

相关文章：