I am learning a fashionable way to write controllers by avoiding direct access to $ scope. There is such a controller

(function (angular) { 'use strict'; angular .module('myApp', [ 'ngAnimate', 'vAccordion' ]) .controller('MainController', function ($scope) { $scope.panesA = [{ id: 'pane-1a', header: 'Pane 1', content: 'Curabitur et...', isExpanded: true }, { id: 'pane-2a', header: 'Pane 2', content: 'Lorem...' }, { id: 'pane-3a', header: 'Pane 3', content: 'Aliquam erat...' }]; $scope.expandCallback = function (index, id) { console.log('expand:', index, id); }; $scope.collapseCallback = function (index, id) { console.log('collapse:', index, id); }; $scope.$on('accordionA:onReady', function () { console.log('accordionA is ready!'); }); }); })(angular);

I rewrite it like this:

 (function (angular) { 'use strict'; angular .module('myApp', [ 'ngAnimate', 'vAccordion' ]) .controller('MainController', MainController); function MainController() { var vm = this; vm.panesA = [{ id: 'pane-1a', header: 'Pane 1', content: 'Curabitur et...', isExpanded: true }, { id: 'pane-2a', header: 'Pane 2', content: 'Lorem...' }, { id: 'pane-3a', header: 'Pane 3', content: 'Aliquam erat...' }]; vm.expandCallback = function (index, id) { console.log('expand:', index, id); }; vm.collapseCallback = function (index, id) { console.log('collapse:', index, id); }; vm.$on('accordionA:onReady', function () { console.log('accordionA is ready!'); }); }); })(angular);

If you have a lot of experience, then laugh at your health). For me, both the reference to the material on the question and the rewritten controller will be valuable. Who does not understand what the problem is, here

vm. $ on ('accordionA: onReady', function () {

If you want to play, then here is http://codepen.io/LukaszWatroba/pen/MwdaLo I’ve cut off the controller and the view for a bit. I have as in question, and the example is completely on CodePen.

I understand that the $ on angular method is only in angular objects, and therefore is not called. Then how to do something like

 var $jQueryObjectNow = $('#abcd').jQueryMethod();

or replace the design?

$scope.$on('accordionA:onReady', function () {

  • one
    everything is simple: there are events only in the osprey, so in this case you need to use an osprey - Grundy
  • @Grundy then is $ scope a required parameter of the controller function or will $ scope be passed automatically? I mean, function MainController ($ scope) { or function MainController () { - Tomash Tarasovich
  • to use $ scope, naturally you have to get it, so function MainController($scope) { - Grundy
  • @Grandy, thanks, angulyar does a lot instead of developers (when compared to the backbone), so I ask such amazing questions. - Tomash Tarasovich

1 answer 1

First of all, you need to understand why they are trying to store data not in $scope , but directly in the controller's object.

Thus, not always obvious behavior is solved with the Osprey inheritance in view. When it is not clear whether the property is taken from the current osprey, or it will be taken from the parent.

It is also important that the Ospreys do not disappear anywhere, they are still created and available. It is in them that the reference to the controller instance that is used in the view is placed.

Since events do not relate to data - they remain in the $ scope object, therefore, to use them, you need to get this object.

Therefore, the type of controller can be:

 (function (angular) { 'use strict'; angular .module('myApp', [ 'ngAnimate', 'vAccordion' ]) .controller('MainController', MainController); function MainController($scope) { var vm = this; vm.panesA = [{ id: 'pane-1a', header: 'Pane 1', content: 'Curabitur et...', isExpanded: true }, { id: 'pane-2a', header: 'Pane 2', content: 'Lorem...' }, { id: 'pane-3a', header: 'Pane 3', content: 'Aliquam erat...' }]; vm.expandCallback = function (index, id) { console.log('expand:', index, id); }; vm.collapseCallback = function (index, id) { console.log('collapse:', index, id); }; $scope.$on('accordionA:onReady', function () { console.log('accordionA is ready!'); }); }); })(angular);