Question

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

在我看来有：

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

在我的控制器中我有：

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

＆＃34;工作＆＃34;变量已正确更新，但如果点击了div，则alert似乎未在视图中更新。

我尝试了$ 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>

Answer 1

问题是您的控制器的范围是<form>...</form>元素，并且您将警报置于该范围之外的模板中。

将<p>元素与表单中的警报一起移动，或将ng-controller属性放在包含它的父节点上。

请参阅http://your-ip-address:8080。

Answer 2

试试这个：

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

注意：要么像'一样转义\'，要么将整个字符串用双引号括起来"this one doesn't"

编辑：

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

问题在于范围。控制器ScanCtrl的范围在form元素内。尝试以这种方式在<ion-item>元素内移动form：

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

或仅在p内移动form元素，并保持原样。

这应该可以解决你的问题

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

2 个答案: