Angular.js "Controller as ..." + $ scope. $ On

Question

Jeśli chciałbym użyć składni "Controller as ..." w Angular, jak mam podejść do rzeczy takich jak $ scope. $ On (...), które muszę włożyć do kontrolera?

Mam wrażenie, że mogę to zrobić w inny sposób niż pokazany poniżej. Tutaj, aby uzyskać $ scope. $ Na pracy i wiążę "to" z funkcją wywołania zwrotnego. Próbowałem wywołać $ on na "tym" wewnątrz kontrolera, ale to nie zadziałało.

Czy możesz dać mi wskazówkę tutaj lub jeśli jestem całkowicie zepsuty, czy możesz wskazać mi jakiś właściwy sposób na zrobienie tego? Dzięki.

main.js:

angular.module('ramaApp') 
.controller('MainCtrl', ['$scope', '$location', function ($scope, $location) { 

    this.whereAmINow = 'INDEX'; 

    $scope.$on('$locationChangeStart', function(event) { 

     this.whereAmINow = $location.path(); 

    }.bind(this)); 

    this.jumpTo = function(where) { $location.path(where); } 
}]); 

index.html:

<div ng-controller="MainCtrl as main"> 

    <p>I am seeing the slide named: {{ main.whereAmINow }}</p> 

    <div ng-click="main.jumpTo('/slide1')">Slide 1</div> 
    <div ng-click="main.jumpTo('/slide2')">Slide 2</div> 
    <div ng-click="main.jumpTo('/slide3')">Slide 3</div> 

</div> 

Answer 1

O ile mi wiadomo, trzeba wstrzyknąć $ zakres jeśli chcesz $, zakres Obserwowane/metod. ControllerAs jest po prostu syntaktycznym cukrem, aby umożliwić bardziej przejrzystą strukturę kontrolerów zagnieżdżonych.

Trzy pomysły, które mogą uprościć kod.

1. Użyj var vm = this, aby pozbyć się bindowania (this).

   var vm = this; 
   vm.whereAmINow = "/"; 
   
   $scope.$on('$locationChangeStart', function(event) { 
       vm.whereAmINow = $location.path(); 
   }); 
   
   vm.jumpTo = function(where) { 
       $location.path(where); 
   } 
   

2. Cały whereamINow zmienna ma sens wprowadzenie go do inicjalizacji aplikacji aka .run() (przed config), ponieważ sądzę, że jest to zmienna globalna i nie trzeba używać obserwatora $ zakres/metoda dla niego.

3. Inną opcją jest użycie fabryki, aby zmiany pozostały, więc po prostu utwórz fabrykę lokalizacji, która przechowuje bieżącą aktywną ścieżkę.

Answer 2

Ok, myślę, że ludzie po prostu zrobić to samo, tak jak w tej kwestii:

Replace $scope with "'controller' as" syntax

Answer 3

Inject $scope i kontroler jest przystosowany cokolwiek nazwał ją

EG:

$stateProvider 
    .state('my-state', { 
    ... 
    controller: 'MyCtrl', 
    controllerAs: 'ctrl', 
    ... 
    }); 



.controller('MyCtrl', function($scope) { 
    var $this = this; 
    $scope.$on('ctrl.data', function(new, old) { 
    // whatevs 
    }); 
    $timeout(function() { 
    $this.data = 'changed'; 
    }, 1000); 
});