$范围问题。未在 HTML 视图中显示更改答案

【问题标题】：$scope issue. Changes not been displayed in HTML view$范围问题。未在 HTML 视图中显示更改
【发布时间】：2016-07-12 07:12:12
【问题描述】：

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

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

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

}

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

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

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

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

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

【问题讨论】：

标签： javascript angularjs scope jstree

【解决方案1】：

好人，我发现这是 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>

这样就完美了！

【讨论】：