使用BindToController在Angular JS中的指令困境

时间:2016-04-27 08:35:30

标签: javascript angularjs angularjs-directive angular-services

我正在使用Angular 1.5和' bindToController'使用指令将信息传递给控制器​​(指令控制器)。问题是从服务中获取的任何需要传递给指令的数据都没有绑定到指令控制器,我找不到原因。

主站点控制器:

angular.module('site')
.controller('siteController', ['$scope' , '$stateParams', '$timeout', '$q', '$filter', 'authCookie', 'SiteService',
    function($scope, $stateParams, $timeout, $q, $filter, authCookie, SiteService) {

        // Set 'this'
        var ctrl = this;

        // Site
        ctrl.loadSite = function() {
            // Service
            SiteService.site.query({id:1}, function(res) {
                // Result
                ctrl.site = res.site
            });
        }
        ctrl.loadSite();
    }
]);

数据由“SiteService”提供。并设置为&c; ctrl.site'这似乎工作正常。

这是指令html(传递网站):

<sitesettings site="ctrl.site"></sitesettings>

网站指令和控制器:

angular.module('siteSettings', []);

// =========
// Directive 
// =========

angular.module('siteSettings')
.directive('sitesettings', function() {
    return {
        restrict:'E',
        scope:true,
        transclude: true,
        controller: 'siteSettingsController',
        controllerAs: 'ctrl',
        bindToController: {
            site:'=',
        },
        templateUrl:'/modules/app/components/siteSettings/siteSettings.html',
        css:'/modules/app/components/siteSettings/siteSettings.css'
    }
})

// ==========
// Controller
// ==========

angular.module('siteSettings')
.controller('siteSettingsController', [ '$timeout', '$location', '$q', '$filter', 'authCookie', 'siteSettingsService', 'Upload',
    function( $timeout, $location, $q, $filter, authCookie, siteSettingsService, Upload) {

        // Set 'this'
        var ctrl = this;
        // Console.log returning empty string
        console.log(ctrl.site)

    }
]);

以上控制台是一个空字符串(当数据实际填充在站点控制器中时)问题似乎是由服务引起的,服务中设置的任何内容都不能绑定到指令控制器。通过设置ctrl.site =&#39;我是一个字符串&#39;在站点控制器内,而不是在服务中它被绑定到指令控制器。因此突出显示导致问题的服务。

我将如何解决这个问题?欢迎任何想法或建议。

更新 - 网站服务代码:

angular.module('index')
.service('SiteService', ['$http', '$resource',
    function($http, $resource) {
        return {
            // Site
            site:$resource('/api/site/:id', {}, { 
                query:{ method:'GET', isArray:false, params:{ id:'@id' } },
            }),
        }
    }
]);

0 个答案:

没有答案