时间戳

首页 > 解决方案 > 页面加载AngularJS时文本框绑定不起作用

javascript - 页面加载AngularJS时文本框绑定不起作用

问题描述

我试图在页面加载时根据承诺值的结果设置文本框值。只有当我点击它然后退出它时，文本框上的值才会设置（就像模糊事件一样）。

控制器

(function() {
    'use strict'
    var newPurchasingCardController = function($scope, $rootScope, $filter, $window, $location, $timeout, requestService) {        

        $scope.actionTitle = "";            
        $scope.gin = "";
        $scope.fullName = "";
        $scope.workEmail = "";
        $scope.msg = "";            

        var getCurrentUserData = function () {

            var dfd = new $.Deferred();
            var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
            $.ajax({
                url: queryUrl,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: onSuccess,
                error: onError,
                cache: false
            });

            function onSuccess(data) {
                dfd.resolve(data);                    
            }

            function onError(data, errorCode, errorMessage) {
                dfd.reject(errorMessage);
            }

            return dfd.promise();               
        }            

        var _init = function () {

            $scope.actionTitle = "New Card Request"

            var promise = getCurrentUserData();

            promise.then(function (data) {

                $.each(data.d.UserProfileProperties.results,function(i,property){
                    if(property.Key === "EmployeeNumber")
                    {
                        $scope.gin = property.Value;
                    }

                    if(property.Key === "FirstName")
                    {
                        $scope.fullName = property.Value;
                    } 
                    else if (property.Key === "LastName") {
                        $scope.fullName += " " + property.Value;
                    }

                    if(property.Key === "WorkEmail") {
                        $scope.workEmail = property.Value;
                    }
                    console.log(property.Key+":"+property.Value);               
                });
            }, function(error) {
                console.log("An error has occurred trying to get employee information." + error);
            });
        }

        $scope.$on('$viewContentLoaded', function(event)
        { 
            _init();
        });            
    }

    angular.module('myApp').controller('newPurchasingCardController', ['$scope', '$rootScope', '$filter', '$window', '$location', '$timeout', 'requestService', createnewPurchasingCardController]);
}());

在html视图中我只有

HTML

<input ng-model="gin" type="gin" class="form-control" id="gin" placeholder="GIN">
<input ng-model="fullName" type="name" class="form-control" id="name" placeholder="Name">
<input ng-model="workEmail" type="email" class="form-control" id="email" placeholder="Email">

我已经尝试使用 viewContentLoaded 但无法正常工作，什么是实现此目的的好方法？谢谢。

标签： javascriptangularjs

解决方案

你正在混合angularjs，Jquery这会导致所有问题。

使用$http服务获取请求：https ://docs.angularjs.org/api/ng/service/$http#get

var getCurrentUserData = function () {

        var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties";
        $http({
            url: queryUrl,
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
            cache: false
        })
         .then(function(response) {
             $scope.gin = response.data.EmployeeNumber;
             // here set scope variables directly
         })
        .catch(function(response) {
           console.error('error', response.status, response.data);
         })
       .finally(function() {
           console.log("finally ");
        });

}

推荐阅读