Angular指令不捕获本地范围内的值

时间:2014-01-22 15:27:34

标签: angularjs angularjs-directive

我有以下HTML。

<h2>{{ profile.first_name }} {{ profile.last_name }}</h2>
<p>{{ profile.organisation_name }}</p>
<p>{{ profile.email }}</p>
<p>{{ profile.phone }}</p>

<div class="row marketing">
    <transform xml="{{ profile.profiles.profile }}" xslt="LawyerProfile.xslt"/>
</div>

我有一个填充配置文件对象的角度服务。我在{{profile.profiles.profile}}中有一些我希望使用指令转换的xml数据。

所以我传入数据和xslt文件来应用转换。

我的指令看起来像这个

'use strict';

clientApp.directive("transform", function () {
return {
    restrict: "E", 
    scope: {
        xml: "@",
        xslt: "@"
    },
    replace: true, 
    transclude: false,
    link: function (scope, element) {
        console.log(scope);
        console.log(scope.xml);
        console.log(scope.xslt);            
    }
};
});   

当我检查范围对象时,它在scope.xml中将xml数据作为字符串,但是当我调试它时,它就不存在了。

的console.log(scope.xslt);工作得很好。

非常感谢任何帮助,谢谢。


更新:

profileController.js

'use strict';

clientApp
.controller('profileController', function($scope, $routeParams, profileService) {
    profileService.getProfile($routeParams.id, $routeParams.publication)
        .then(function(profile) {                
                $scope.profile = profile;
        });
});

profileService.js

'use strict';

clientApp.factory('profileService', function($http, $q) {
return {
    getProfile: function(id, publication) {
        var deferred = $q.defer();

        var url = 'http://192.168.7.37:3000/lawyer/' + id + '/' + publication;
        $http({ method: 'GET', url: url })
            .success(function(data, status, headers, config) {
                deferred.resolve(data);
            })
            .error(function(data, status, headers, config) {
                deferred.reject(status);
            });

        return deferred.promise;
    }
};
});

1 个答案:

答案 0 :(得分:1)

问题是xml绑定到来自$resource服务的插值,因此最好使用$timeout让角度的摘要周期在你之前完成做其他事。

您可以尝试这样的事情:

.directive("transform", function ($timeout) {
    return {
        ...
        link: function (scope, element) {
            ...
            $timeout(function() {
                console.log(scope.xml);
            }, 0);          
        }
    };
});