Question

这是我的HTML

            <form name="change_profile_form" ng-controller="profileController" id="change_profile_form"
             ng-submit="changeProfileForm()">

                <input id="username" ng-model="data.User.username" name="username" class="profile_input" disabled value="{{ my_profile.User.username }}" required />

这是我的js：

var angularApp = angular.module("myApp", ['ngResource', 'myApp.directives']);


// MyProfile constructor function to encapsulate HTTP and pagination logic
angularApp.factory('MyProfile', function($http) {
  var MyProfile = function() {
    this.user = [];
    this.profile = [];
    // this.page = 1;
    // this.after = '';
    // this.perPage = 6;
    // this.maxLimit = 100;
    // this.rowHeight = 308;
  };

  MyProfile.prototype.fetch = function() {
    var url = "/users/my_profile?callback=JSON_CALLBACK";
    $http.defaults.headers.get = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
    $http.get(url).success(function(data, status, headers, config) {
      this.user = data.user;
    }.bind(this));
  };

  return MyProfile;
});

angularApp.controller('profileController', ['$scope', 'MyProfile', '$users', '$parse', function($scope, MyProfile, $users, $parse) {
  $scope.my_profile = new MyProfile();
  $scope.my_profile.fetch();
  $scope.changeProfileForm = function() {
    var serverMessage = $parse('change_profile_form.email.$error.serverMessage');
    $users.changeProfile(
      $scope.data,
      function(data, status, headers, config) {
          if (typeof data.error === 'undefined' || typeof data.result === 'undefined') {
            alert('Server cannot be reached. Please refresh webpage and try again!');
            return;
          }
          if (data.result != null) {
            title = "Profile Saved.";
            message = "Your <strong>PROFILE</strong> has been<br />successfully changed and saved.";
            options = new Object();
            options["box-title"] = new Object();
            options["box-title"]["padding-left"] = 5;
            showOverlayForSuccess(title, message, options);
          }
      },
      function(data, status, headers, config) {
          console.log(data);
          // error callback
          $scope.errors = data.errors;
      })
  }
}

我在chrome dev工具中检查了我的网络标签。工厂中的/users/my_profile未被触发。

我在哪里弄错了？

Answer 1

我采用了http://sravi-kiran.blogspot.com/2013/03/MovingAjaxCallsToACustomServiceInAngularJS.html

的逻辑

我的更改是：

a）意识到input已经在使用ng-model，因此没有必要使用value属性

b）重写工厂并使用$q

c）在控制器内部，直接调用工厂方法

更改a）

            <form name="change_profile_form" ng-controller="profileController" id="change_profile_form"
             ng-submit="changeProfileForm()">
                <input id="username" ng-model="data.User.username" name="username" class="profile_input" required style="position: absolute;left:151px;top:<?php echo -138 + $difference; ?>px;"/>

改变b）

// MyProfile constructor function to encapsulate HTTP logic
angularApp.factory('MyProfile', function($http, $q) {
  return {
    getProfile: function() {
      // creating a deferred object
      var deferred = $q.defer();

      var url = "/users/my_profile?callback=JSON_CALLBACK";
      // prepare headers so that CakePHP can accept the call
      $http.defaults.headers.get = { 'Accept' : 'application/json', 'Content-Type' : 'application/json' };
      // calling the url to fetch profile data
      $http.get(url).success(function(data, status, headers, config) {
        // passing data to deferred's resolve function on successful completion
        deferred.resolve(data);
      }).error(function() {
        // sending a friendly error message in case of failure
        deferred.reject("An error occurred while fetching data");
      });
      // returning the promise object
      return deferred.promise;
    }// end getProfile
  }// end return
});

更改c）这就是我在控制器内调用工厂的方式

angularApp.controller('profileController', ['$scope', 'MyProfile', '$users', '$parse', function($scope, MyProfile, $users, $parse) {
  function getProfile() {
    MyProfile.getProfile().then(function(data) {
      $scope.data = data.user;
      console.log($scope.data);
    },
    function(errorMessage) {
      $scope.error = errorMessage;
    });
  }
  getProfile();

如何显示使用angular检索的数据？

1 个答案: