Javascript 在函数中更新变量时，变量未反映视图中的更新

我有一个angular应用程序，尝试使用函数更新视图中的变量

我认为：

<form ng-controller="ScanCtrl">
    <div ng-click="method()">button</div>
    <p>{{alert}}</p>
    <p>{{working}}</p>
</form>

“工作”变量已正确更新，但如果单击

div

，

警报在视图中似乎未更新

我尝试了$scope.apply，但它抛出了一个错误

以下是控制器的完整代码：

nojquery

.controller('ScanCtrl', function($scope, QB){
    $scope.scan = [];

    $scope.scan_code = function(){
        console.log("scan function reached");
        if (typeof $scope.scan.action != 'undefined') {
            console.log($scope.scan.action);
        } else  {
            console.log("action not chosen");
            $scope.scan.alert = 'Please choose an action!';
            $scope.$apply();
        }
    };

    $scope.$on('$ionicView.beforeEnter', function(e) {
        QB.authorize().then(function(authorizeResponse) {
            if (authorizeResponse.ticket) {
                console.log("scanning");
            } else {
                QB.nav('login');
            }
        });
    });
});

以下是所有视图：

<ion-view view-title="SCAN">
    <ion-content class="padding">
        <h2>Warehouse</h2>
        <h4>{{data.warehouse}}</h4>
        <h2>Item Check In/Out</h2>
        <form ng-controller="ScanCtrl">
        <ion-radio name="action" ng-model='scan.action' value="add">Add item to vehicle</ion-radio>
        <ion-radio name="action" ng-model='scan.action' value="rem">Remove item from vehicle</ion-radio>
        <button class="button button-full button-positive" ng-click="scan_code()">Scan</button>
        </form>
        <ion-item>
            <p class="assertive">{{scan.alert}}</p>
            <h2>{{data.scannedItems.model_details}}</h2>
            <p>{{data.scannedItems.classification_details}}</p>
        </ion-item>
    </ion-content>
</ion-view>


仓库
{{data.warehouse}
项目签入/签出
将项目添加到车辆
从车辆上取下物品
扫描
{{scan.alert}
{{data.scannedItems.model_details}
{{data.scannedItems.classification_details}

试试这个：

.controller('ScanCtrl', function($scope, QB){
    $scope.working = 'this update works';
    $scope.method = function(){
        $scope.alert = "this one doesn't";
    }; 
});

注意：要么像这样转义
'
，

，要么用双引号将整个字符串括起来

“这一个不”

编辑：

在编辑问题后考虑您的代码

问题在于范围。控制器的范围

ScanCtrl

在

表单

元素中。尝试将

移动到

表单中
元素，方法如下：

<form ng-controller="ScanCtrl">
    <ion-radio name="action" ng-model='scan.action' value="add">Add item to vehicle</ion-radio>
    <ion-radio name="action" ng-model='scan.action' value="rem">Remove item from vehicle</ion-radio>
    <button class="button button-full button-positive" ng-  click="scan_code()">Scan</button>
    <ion-item>
        <p class="assertive">{{scan.alert}}</p>
        <h2>{{data.scannedItems.model_details}}</h2>
        <p>{{data.scannedItems.classification_details}}</p>
    </ion-item>
</form>


将项目添加到车辆
从车辆上取下物品
扫描
{{scan.alert}
{{data.scannedItems.model_details}
{{data.scannedItems.classification_details}


或者只将
p
元素移动到
表单中
并保持静止状态

这应该可以解决您的问题
问题在于控制器的作用域是
..
元素，并且您将警报放置在模板中该作用域之外

在表单中向上移动带有警报的
元素，或者将ng controller属性放置在包含它的父节点上

请看。
它工作正常。你有错误吗？顺便说一句，你需要对“不”中的撇号进行转义。很抱歉，“不”不在那里，它实际上是说“请选择一个操作！”转义应该不重要。你在
$scope中遇到的错误是什么。apply
？因此，你的代码中一定有其他东西没有显示，或者有某种错误。我假设您没有从
QB
中得到依赖项注入错误，您可能正在此例之外使用该错误。@Shri我得到的错误是错误：[$rootScope:inprog]$apply已在进行中
<form ng-controller="ScanCtrl">
    <ion-radio name="action" ng-model='scan.action' value="add">Add item to vehicle</ion-radio>
    <ion-radio name="action" ng-model='scan.action' value="rem">Remove item from vehicle</ion-radio>
    <button class="button button-full button-positive" ng-  click="scan_code()">Scan</button>
    <ion-item>
        <p class="assertive">{{scan.alert}}</p>
        <h2>{{data.scannedItems.model_details}}</h2>
        <p>{{data.scannedItems.classification_details}}</p>
    </ion-item>
</form>