AngularJS Ionic在两个控制器之间使用ng-model

时间:2016-07-20 15:43:43

标签: angularjs mvvm angularjs-ng-model

好吧,尝试更新我的代码以使用.value和.factory来清理和优化我的应用程序... 现在,我的services.js看起来像:

// Définition des données lues par le scan du code barre
.value("ScanDatas",{
    collectedDatas: {}
})

// Service de scan des codes-barre : dépend de scanDatas
.factory("ScanService", ["ScanDatas", function (ScanDatas) {
    var scan = {};

    scan.scanBarCode = function(){
        var scanner = cordova.plugins.barcodeScanner; // Récupère le scanner

        // Exécute le scan proprement dit
        scanner.scan(
            function(result){
                alert("Lecture du code-barre\n" +
                    "Résultat : " + result.text + "\n" +
                    "Format : " + result.format + "\n" +
                    "Annulation : " + result.cancelled
                );
                ScanDatas.collectedDatas.text = result.text;
                ScanDatas.collectedDatas.format = result.format;
                ScanDatas.collectedDatas.annulation = result.cancelled;

            }, function(error){
                ScanDatas.collectedDatas.error = error;
            }
        )
    }
    return scan;
}])

编辑我的控制器以调用服务,当我点击按钮时扫描效果很好:

    .controller("ScanCtrl", ["$scope", "$ionicPopup", "$timeout", "ScanDatas", "ScanService", function ($scope,$ionicPopup,$timeout,ScanDatas,ScanService){
    $scope.add = {}; // Initialise l'objet pour la récupération des données


    $scope.scanBarCode = function(){
        var scanResult = ScanService.scanBarCode();
        console.log("Données reçues : " + ScanDatas.collectedDatas.text);
        $scope.add.ean = ScanDatas.collectedDatas.text;
    }
}])

但是,在wiew中,ng-model add.ean保持desesperatly为空...不确定.value()与视图和控制器一起工作的方式......

致@Claie

我是AngularJS和Ionic的初学者,并且遇到MVVM问题。 有以下观点:

<ion-view title="Ajouter" id="page2" class=" ">
<ion-content padding="true" class="has-header">
    <button id="ajouter-button3" class=" button button-positive  button-block " ng-controller="ScanCtrl" ng-click="scanBarCode()">Scanner</button>
    <div class="spacer" style="width: 300px; height: 13px;"></div>
    <form id="ajouter-form1" class="list ">
        <label class="item item-select " id="ajouter-select1" name="stockage">
            <span class="input-label">Stockage</span>
            <select id="add-storage-area" class="form-control" required="required" data-ng-options="storageArea.id as storageArea.libelle for storageArea in storageAreas" ng-model="form.storageArea"></select>
        </label>

        <label class="item item-input " id="add-ean" name="ean">
            <span class="input-label">EAN</span>
            <input type="text" placeholder="Code EAN" name="add.ean" ng-model="add.ean">
        </label>
...

&#34; scanCtrl&#34;的控制器如下:

  .controller('ScanCtrl', ['$scope', function ($scope,$ionicPopup,$timeout) {
    var scanner = cordova.plugins.barcodeScanner; // Récupère le scanner
    $scope.scanBarCode = function(){
        scanner.scan(
            function(result){
                alert("Lecture du code-barre\n" +
                    "Résultat : " + result.text + "\n" +
                    "Format : " + result.format + "\n" +
                    "Annulation : " + result.cancelled
                );
                $scope.add.ean = result.text;
            }, function(error){
                //alert("Le scan a échoué : " + error);
                $ionicPopup.alert({
                    title: "Erreur",
                    template: "Une erreur est survenue lors de la lecture du code-barre"
                }).then(function(res){
                    // Effacer les données du formulaire ?
                });
            }
        )
    }
}])

正确获取EAN条形码,但是:

$scope.add.ean = result.text;

不起作用,相关输入中没有任何值...

确定这是一个初学者的错误,但......

... THX

1 个答案:

答案 0 :(得分:0)

也许你想要$rootScope$rootScope是全局范围,可以在控制器,过滤器,指令等之间保存值