Как получить доступ к угловому контроллеру $ scope в директивной ссылке?

Question

Я хочу получить $ scope в контроллере из моей директивной ссылки. Он потерпел неудачу и ошибся. Спасибо за вашу помощь.

Ошибка type error: scope.something is undefined.

HTML

<div ng-controller="myController"> 
    show me something {{ something }} 
    <!-- this is a canvas --> 
    <my-directive></my-directive> 
</div> 

JS

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) { 
    // this is the something 
    $scope.something = false; 
}]).directive(myDirective, function(){ 
    return { 
    template: '<canvas width='500px' height='500px'></canvas>', 
    link: function(scope, el, attr) { 
     //how to access that 'something' 
     var bah = scope.something; 
    } 
    }; 
}); 

UPDATE Действительно, благодаря всем вам. особенно для u @immirza

им так жаль, что я не могу ответить u один за другим. это просто добавить $parent

//how to access that 'something' 
var bah = scope.$parent.something 

Answer 1

FYI, то scope is parent to directive так что вы должны иметь доступ как родительской области. Попробуйте следовать, и он должен работать.

Кроме того, лучший способ узнать, почему он бросить не определенную ошибку ... положить контрольную точку на линии, курсор к $ объему и увидеть все доступные элементы в объеме.

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) { 
    // this is the something 
    $scope.something = false; 
}]).directive(myDirective, function(){ 
    return { 
    template: '<canvas width='500px' height='500px'></canvas>', 
    link: function(scope, el, attr) { 
     //how to access that 'something' 
     var bah = scope.$parent.something; // added parent. 
    } 
    }; 
}); 

Answer 2

ли вы пытаетесь установить опцию «Scope» к «ложным» в объявлении директивы? С помощью этой опции область действия директивы должна быть такой же, как и область контроллера.

Answer 3

изменения к этому ...

angular.module('fooBar',[]).controller(myController, ['$scope', function($scope) { 
    // this is the something 
    $scope.something = false; 
}]).directive(myDirective, function(){ 
    return { 
    template: '<canvas width='500px' height='500px'></canvas>', 
    link: function(scope, el, attr) { 
     //how to access that 'something' 
     var bah = $scope.something;//changed from scope.something to $scope.something 
    } 
    }; 
}); 

Answer 4

Если я правильно понимаю ваш вопрос вы хотите иметь директиву:

1/не имеет изолированную область видимости (так что вы можете получить доступ к родительской области и взаимодействовать с ним)

2/Вы хотите поделиться некоторыми свойствами области с вашим контроллером.

Так решение:

1/@jkoestinger ответ,

2/с использованием атрибутов директивы и параметры области объекта.

Но для меня вы должны потратить некоторое время здесь: https://docs.angularjs.org/guide/directive

Answer 5

Ваш код будет работать, как вы ожидаете. Эта проблема связана с некоторыми ошибками типа в вашем коде.

Пожалуйста, используйте

HTML

<div ng-controller="myController"> 
     show me something {{ something }} 
     <!-- this is a canvas --> 
     <my-directive></my-directive> 
</div> 

Угловая

angular.module('fooBar',[]) 
    .controller('myController', ['$scope', function($scope) { 
    // this is the something 
    $scope.something = false; 
    }]) 
    .directive('myDirective', function(){ 
    return { 
     template: '<canvas width="500px" height="500px"></canvas>', 
     link: function(scope, el, attr) { 
     //how to access that 'something' 
     var bah = scope.something; 
     console.log(bah) 
     } 
    }; 
    }); 

Пожалуйста, обратитесь fiddle

Explaination

Директива не имеет самообладания, если не указано. Он будет иметь область действия с родительской. В этом случае «scope of myDirective» совпадает с scope of myController. Это связано с тем, что мы можем получить доступ к scope.somethingin directive scope.

Ошибка в коде

1. Директива и контроллер имя должно быть в кавычках. т.е. ('myDirective' не myDirective)

2. Котировки внутри кавычек должны быть разделены.

   '<canvas width="500px" height="500px"></canvas>'//correct

   `'<canvas width='500px' height='500px'></canvas>'` `//incorrect` 
   

Answer 6

scope.something не определен, так как директивы функции, связывающие вызывается до контроллера вызывается. Вы должны использовать $watch.

angular.module('fooBar',[]) 
    .controller('myController', ['$scope', function($scope) { 
     // this is the something 
     $scope.something = false; 
}]); 


angular.module('fooBar').directive('myDirective', function(){ 
    return { 
    template: '<canvas width='500px' height='500px'></canvas>', 
    link: function(scope, el, attr) { 
     var blah; 
     scope.$watch("something", function (value) { 
      blah = value; 
     }); 
    } 
    }; 
});