无法使用AngularJS在视图中使用$ ctrl填充字段

时间:2017-07-25 09:22:43

标签: angularjs rest angular-ui-router

使用ui-router,我正在解析数据,因此在呈现之前它可用于我的视图,如下所示:

.state('app.userprofile', {
        url: '/userprofile',
        component: 'user',
        resolve: {
            user: ['userService', function(userService) {
                return userService.fetchUser();
            }],
            timezones: ['timezoneService', function(timezoneService){
                return timezoneService.fetchUsaTimeZones();
            }]
        }
    })
}]);

如果我从state登录到控制台,则会显示响应:

resolve: {
   user: ['userService', function(userService) {
      return userService.fetchUser().then(function(response){console.log(response)};
    }]

enter image description here

我正在尝试使用默认的controllerAs参考user-profile.htm填充user component$ctrl中指定的字段。我在我的应用程序中使用了这个,但出于某种原因,在这种状态下它无法实现这一点。

问题

为什么我的字段无法加载模型提供的数据?

app.component('user', {
    bindings: { user: '<' },
    bindings: { timezones: '<' },
    templateUrl: 'p3sweb/app/components/user/views/user-profile.htm',
    controller: ['userService', 'timezoneService', function(userService, timezoneService) {

        var vm = this;

     //functinality for updating user

    }]
});

app.factory('userService', function($http, $q) {

    var factory = {};

        var REST_SERVICE_URI = 'http://localhost:8080/p3sweb/rest-user/';

        factory.fetchUser = function() {

            var deferred = $q.defer();
             $http.get(REST_SERVICE_URI)
                .then(
                function (response) {
                    deferred.resolve(response.data);
                },
                function(errResponse){
                    console.error('Error while fetching user');
                    deferred.reject(errResponse);
                }
            );

            return deferred.promise;
        }

    return factory;

});
<form  action="#" method="POST" name="userProfileForm">
    <div>
        <legend >User Info</legend>
        <div class="form-group row">
            <label for="emailAddress">Email address</label>
            <div>
                <input type="email" name="emailAddress" ng-model="$ctrl.user.emailAddress">

            </div>
        </div>
    </div>
</form>

1 个答案:

答案 0 :(得分:1)

它是绑定,第二个是覆盖第一个:

bindings: {
  user: '<',
  timezones: '<'
}

那应该解决它:)