无法从Angular Directive中的服务访问对象属性

Question

I have a JSON service that outputs a roleName and an id and I am trying to use the role to hide or show elements in an application using an angular directive. It appears that the service is successfully being called and $scope.data is being populated from the output but I don't seem to be able to access the role from the data object as the console log reads Undefined for $scope.data.rolename.

app.directive('restrictTo', ['SecuritySvc', function (SecuritySvc) {
return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    scope: {},
    controller: ['$scope', '$attrs', '$q', 'SecuritySvc', function ($scope, $attrs, $q, SecuritySvc) {
        $scope.data = SecuritySvc.getRole();

            if ($scope.data.roleName == $attrs.restrictTo) {
                $scope.allowed = true;
            } else {
                $scope.allowed = false;
            }

            console.log($scope.data); // showing in log
            console.log($scope.data.roleName); // Undefined

    }],
    template: '<div ng-show="{{ $scope.allowed }}" ng-transclude></div>'
}

Console output from the code above

$promise: Object
$resolved: true
roleId: 1
roleName: "Admin"

undefined

Answer 1

I think I'm a little confused on your purpose here. You are creating a deferred promise and then immediately resolving it? Doesn't that defeat the purpose of the deferred/promise pattern's handling of asynchronous calls? Is your SecuritySvc.getRole() method doing an AJAX call to return that data? I had always thought that the AJAX call should be the thread calling Promise::resolve once it had completed. Have you tried just using $http ?

Even after all that, I'm REALLY confused that you can console.log data successfully, but not data.roleName . data showing up implies that whatever you're doing with the deferred/promise pattern, you're getting your response where you need it. Are you certain about the structure of the data object at this point? There's no layer between data and your information? I'm a little surprised to see it buried in with the Angular methods and properties like $promise and $resolved .

Don't know if any of that is helpful...

Answer 2

I've seen this behavior when your directive creates an isolated scope (as yours does) and the service is accessing the view controller (rather than the directive controller) scope. Since the scopes are different, the $scope.data objects are different.

You can check the scope id numbers by placing a breakpoint within the directive controller and another within the service, and examine the $id values. There are several ways of working around this, but the specific solution will depend on your particular implementation.

It might be helpful to read up on the isolated scope bindings - '@' and '=', see:

http://docs.angularjs.org/guide/directive