指教

Question

Helloo，我尝试将数据从我的添加新手机表单保存到数组中使用AngularJS中的工厂。是我的 Home.html 文件：

<div class="popup" dx-popup="popupOptions">
   <div class="dx-label">Phone Name</div>
   <div dx-text-box="nameOfPhone" ng-model="phoneName"></div><br /><br />

   <div class="dx-label">Phone Seria</div>
   <div dx-text-box="seriaOfPhone" ng-model="phoneSeria"></div><br /><br />

   <div class="dx-label">Image Url</div>
   <div dx-text-box="imgurlOfPhone" ng-model="phoneImgUrl"></div><br />
   <img src="{{phoneImgUrl}}" alt="Image" style="max-height:20%;max-width:20%" />

   <div dx-button="savePhone"></div>
   <div dx-button="cancelSavePhone"></div>

 </div>

用于保存数据我在 HomeController.js中使用工厂我写了代码：

var myApp = angular.module("myApp", ['dx']);
myApp.controller("defaultCtrl", ['$scope', 'notify', function ($scope, notify) {
$scope.savePhone = {
        text: "Save",
        type: "success",
        onClick: function () {
                            var phoneTest = $scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl;
        notify(phoneTest);
        }
    }

//factory session phones storage    
}]).factory('notify',['$window', function ($scope) {
    $scope.phonesStorage = [{}];
    return function (phoneTest) {
        $scope.phonesStorage.push(phoneTest);

        alert($scope.phonesStorage);

    };
}]);

为了检查自己，我使用 alert（$ scope.phonesStorage）; 它有效，数据会复制到数组中，但是，当我在 Home.html 页面中尝试显示数据时，使用ng-repeat没有任何结果：

<div ng-repeat="phone in phonesStorage">
            {{phone}}
</div>

我应该如何保存数据以进行显示，我尝试以这样的方式保存数据 var phoneTest = '{'+$scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl + '}'; 并且像这样：

var phoneTest = '{'+'"Name"' + ':' + '"' + $scope.phoneName + '",' + '"Seria"' + ':' + '"' + $scope.phoneSeria + '",' + '"ImgUrl"' + ':' + '"' + $scope.phoneImgUrl + '"}';  ?

感谢您的回答。

Answer 1

不太确定您要对工厂做什么。这是一些建议。

这是什么？

factory('notify',['$window', function ($scope)...

注入的服务是$ window，但你称之为$ scope？ 这没有意义！

语法应该是注入服务的名称与参数相同，例如

factory('notify',['$window', function($window)...

还有什么？

将手机数据放入对象$ scope.phone 并绑定到 phone.phoneName，phone.phoneSeria，phone.ImgUrl

然后你有一个包含你需要的所有数据的对象而不是单独的值。

最后

如果您想使用工厂或其他服务来保存手机，请使用REST服务。你只是传递对象而不是范围！不要通过范围！。

你可以这样做：

notify(phone); //this contains your phone object, the object holds all variables

在你的工厂里你有这样的东西（如果你想使用$ log，你需要注入它。在浏览器的开发者控制台上查看日志消息https://developers.google.com/web/tools/chrome-devtools/）

$log.log("the phone", phone); // log object and check in console

我建议您仅使用服务来执行功能而不是保存数据。列表phoneStorage应该在您的控制器中！

如果您需要更多帮助，请与我们联系。

快乐的编码！：）

Answer 2

您混淆了scope controller和factory他们没有相同的范围，因此您无法访问父控制器内的工厂内容。

首先，您需要更改工厂代码以返回singleton而不是函数。像

.factory('notify', ['$window', function(win) {
   var phonesStorage = [];
   return {
      phonesStorage: phonesStorage,
      store_phones: function (phoneTest) {
           phonesStorage.push(phoneTest);
           alert(phonesStorage);
        }
      }
    }
 }]);

并在您的控制器中，

.controller("defaultCtrl", ['$scope', 'notify', function ($scope, notify) {
   $scope.phonesStorage = notify.phonesStorage; //to get the phoneStorage from the notify scope
   $scope.savePhone = {
      text: "Save",
      type: "success",
      onClick: function () {
         var phoneTest = $scope.phoneName + $scope.phoneSeria + $scope.phoneImgUrl;
         notify.store_phones(phoneTest);
      }
    }
 }])

指教

使用service执行此任务。

如果您有不同的控制器来处理添加和显示电话。

每次将工厂注入不同的scope时，工厂都会为您生成一个全新的实例。

另一方面，服务在整个申请过程中保持状态。

要实现这一简单的更改，请将factory改为service，而不是。

.service('notify', ['$window', function(win) {
   var phonesStorage = [];
   return {
      get_phones: function() {
         return phonesStorage;
      },
      store_phones: function (phoneTest) {
           phonesStorage.push(phoneTest);
           alert(phonesStorage);
      }
   }
 }]);

并在您的控制器中

$scope.phonesStorage = notify.get_phones(); //to get the phoneStorage from the notify scope

如何将数据保存到数组使用AngularJS中的工厂

2 个答案:

指教