Für jede Winkelstrecke ziehe ich eine Vorlage ein. Wie aktiviere ich die Bereiche und Uhren auf diesen Vorlagen?

Question

Ich habe eine Hauptseite mit ng-view definiert.

Mein Routing zieht mehrere Vorlagen ein.

config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 

    $routeProvider.when('/view1', { 
     templateUrl: 'view1/view1.html', 
     }) 

    .when('/view2', { 
     templateUrl: 'view2/view2.html', 
     }) 

    .otherwise({redirectTo: '/view1'}); 
}]); 

Meine erste Vorlage sieht wie folgt aus:

<p>This is the partial for view 1.</p> 

<div ng-controller="View1Ctrl"> 

    <input type="text" 
      ng-model="search" 
      ng-model-options="{ debounce: 800 }" 
      placeholder="Enter full movie name" 
      autofocus /> 

</div> 

Die JS für diese Vorlage sieht wie folgt aus;

'use strict'; 

angular.module('myApp.view1', []) 

.controller('View1Ctrl', [function($scope, $http) { 

    $scope.$watch('search', function() { 
     fetch(); 
    }); 

    function fetch(){ 
     alert("it werky"); 
    } 

}]); 

Warum erhalte ich die Fehlermeldung: Angularjs: 13708 Typeerror: kann Eigenschaft ‚$ watch‘ undefinierter lesen?

Ich bin im Wesentlichen ziehen in eine Vorlage mit Modellen und Richtlinien definiert, aber ich glaube nicht, dass diese ausgeführt werden.

Answer 1

Kann Ihre Abhängigkeiten werden nicht gespritzt bekommen, ein Array mit der Konstruktor-Funktion sind vorbei, da es nur Element ist.

Hier ist ein Arbeits Plunk. http://plnkr.co/edit/U2hxQPBZMVo2jaR4bwsq?p=preview

myApp.controller('View1Ctrl', ['$scope', '$http', function($scope, $http) { 

    alert ("jaiHo"); 
    $scope.$watch('search', function() { 
     fetch(); 
    }); 

    function fetch(){ 
     alert("it werky"); 
    } 

}]); 

Answer 2

Versuchen Sie folgendes:

'use strict'; 

angular.module('myApp.view1', []) 

.controller('View1Ctrl', ['$scope', '$http', function($scope, $http) { 

    $scope.$watch('search', function() { 
     fetch(); 
    }); 

    function fetch(){ 
     alert("it werky"); 
    } 

}]); 

Hinweis, wie ich Abhängigkeiten injizieren

Answer 3

dieses

(function() { 
 
    'use strict'; 
 

 
    angular.module('myApp.view1', []) 
 
    .controller('View1Ctrl', function($scope, $http) { 
 
     var vm = this; 
 
     $scope.$watch('vm.search', function(newValue, oldValue) { 
 
      fetch(newValue, oldValue); 
 
     }, true); 
 

 
     function fetch(newValue, oldValue){ 
 
      vm.newValue = newValue; 
 
      vm.oldValue = oldValue; 
 
     } 
 
    }); 
 

 
}());

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp.view1"> 
 
    <div ng-controller="View1Ctrl as vm"> 
 
    <input ng-model="vm.search" type="text" /> 
 
    <div> 
 
     Old Value: {{vm.oldValue}} 
 
    </div> 
 
    <div> 
 
     New Value: {{vm.newValue}} 
 
    </div> 
 
    </div> 
 
</div>