AngularJS将返回的json数据绑定到模板

时间:2015-05-05 20:50:38

标签: angularjs angular-ui-bootstrap

我无法找到关于如何将返回的json对象绑定到角度模板的简单步骤[模板也是远程的]

e.g。成功回调中的数据是JSON,我想在显示之前将其绑定到模板

app.controller('jobs', ['$scope', 'wpHttp', function ($scope, wpHttp) {
    $scope.buildMatches = function (job_id) {
        $scope.matchesHtml = 'Loading matches please wait ...';
        wpHttp("get_employer_job_matches").success(function (data) {
                        // bind json to template similar to mustache.js?
                        $scope.matchesHtml = data;
                    });
                }; etc.......

我正在使用bootstrap.ui,我想加载渲染的模板,如下所示

<tab select="buildMatches(job.ID)" heading="Matches">
  <div data-ng-bind-html="matchesHtml"></div>
</tab>

@ azium 是的,JSON数据按预期返回一切正常,我认为问题可以使用自定义指令解决,我想将数据绑定到templateUrl:views_url +“matches.php”仅当tab select =“buildMatches(job。 ID)选择“heading =”匹配“。

(function (angular, wp_localize) {

    var app = angular.module("app", ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
    var theme_url = wp_localize.theme_url;
    var views_url = theme_url + "/angular-apps/employer-profile/views/";
    var language = lang;

    app.service('wpHttp', ['$http', function ($http) {
            var request = {
                method: 'POST',
                url: ajaxurl,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            };
            return function (action, data) {
                var queryStr = "action=" + action;
                if (data) {
                    queryStr += "&data=" + JSON.stringy(data);
                }
                request.data = queryStr;
                return $http(request);
            };
        }]);


    app.controller('jobs', ['$scope', 'wpHttp', function ($scope, wpHttp) {

            $scope.lang = language;
            $scope.img = theme_url + "/images/front_page/candidate-mummy.png";
            $scope.questionnaireHtml = $scope.matchesHtml = '';
            $scope.buildMatches = function (job_id) {
                $scope.matchesHtml = 'Loading matches please wait ...';
                wpHttp("get_employer_job_matches").success(function (data) {
                    $scope.matchesHtml = data;
                });
            };
            $scope.buildQuestionnaire = function () {
                $scope.matchesHtml = 'Loading please wait';
            };

            wpHttp("get_employer_jobs").success(function (data) {
                $scope.jobs = data;
            });
        }]);

    app.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider
                    .when('/', {
                        templateUrl: views_url + "create-jobs.php",
                        controller: 'jobs'
                    }).when('/jobs', {
                templateUrl: views_url + "list-jobs.php",
                controller: 'jobs'
            });
        }
    ]);

    app.directive('ngMatchesHtml', function () {
        return {
            restrict: 'A',
            templateUrl: views_url + "matches.php"
        }
    });



})(angular, wp_localize_employer_profile);

0 个答案:

没有答案