Dies ist meine JS-DateiMit zwei ng-Controller mit AngularJS

var camListApp = angular.module('camListApp', []); 
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 
    $http.get('http://localhost:8080/camera/list').then(function(response) { 
      $scope.records= response.data; 
     }); 
    }]); 
camListApp.controller('Hello2',['$scope', function($scope){ 
    $scope.custom = true; 
    $scope.toggleCustom = function() { 
     $scope.custom = ! $scope.custom; 
    }; 
}]);

Dies ist meine HTML-Datei

<html ng-app='camListApp'> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"> 
</script> 
<script src="hello.js"></script> 
<title>Image downloader </title> 
</head> 


<body> 
<h3>Search by cameraid:</h3><br> 
<select ng-model="searchBox" style="width:25%"> 
<option value="000000006f4280af">000000006f4280af</option> 
<option value="002">002</option> 
<option value="0011">0011</option> 
</select> 


<div ng-controller="Hello"> 
<br> 
<table> 
    <thead> 
     <tr> 

     <th>CamID</th> 
     <th>Timestamp</th> 
     <th>View Image</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="record in records | filter:searchBox"> 

     <td>{{record.cameraid}}</td> 
     <td>{{record.timestamp}}</td> 
     <div ng-controller="Hello2"> 
     <td><button ng-click="toggleCustom()">View</button></td> 

     </tr> 
    </tbody> 
    </table> 
    <span ng-hide="custom">From: 
     <input type="text" id="from" /> 
    </span> 
    <span ng-show="custom"></span> 
</div> 

</body> 
</html>

Wie kann ich zwei Controller in einer App zu arbeiten? Da ich keine Möglichkeit finden kann, gleichzeitig zu arbeiten. Der erste Controller ist, meinen Webservice mit angularjs zu benutzen, aber das kann funktionieren und ich habe einen anderen Controller hinzugefügt, der eine Taste zum Ein- und Ausblenden benutzt.

Quelle

2016-06-14 Alvin Wee

'div' in einem' tr' kein gültiges Element ist. Gibt es auch Konsolenfehler? – devqon

wie @devqon schrieb, dein html ist nicht gültig, du schließt nicht einmal dein div mit ng-controller – kTT

Also wo soll ich das div setzen? –

Es gibt einige Probleme mit Ihrem Code. Zunächst einmal ist div kein gültiges Element als Kind eines tr, also verliere das.

Zweitens Ihre custom Eigenschaft ist außerhalb des zweiten Controllers, wenn Sie den aktuellen Scoping halten:

<!-- the Hello2 controller and its scope is only available on the td 
itself and its children. You use your 'custom' property outside of this, 
so that won't work --> 
<td ng-controller="Hello2"><button ng-click="toggleCustom()">View</button></td>

an Ihrem Scoping Blick sollten Sie einfach nur den ersten Controller verwenden, und setzen Sie den Code auf, dass man:

var camListApp = angular.module('camListApp', []); 
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){ 

    $scope.custom = true; 
    $scope.toggleCustom = function() { 
     $scope.custom = ! $scope.custom; 
    }; 
    $http.get('http://localhost:8080/camera/list').then(function(response) { 
      $scope.records= response.data; 
     }); 
    }]);

Quelle

2016-06-14 12:33:31 devqon

Also, wie sollte ich den Code in meinem ersten Controller setzen? –

Es funktioniert! Ich entferne nur den zweiten Controller und folge deiner Methode. –

lesen Sie die Dokumentation zunächst - angularjs docs

die Antwort auf Ihre Frage ist - kein, Ihre .html Datei einen Controller

haben können, aber wenn Sie Ihre Logik wiederverwenden möchten, wird es über Fabriken und Dienstleistungen getan - angularjs docs

ein anderes must-read: angularjs good practice

so lassen wir das

auf Ihren Code anwenden

app.js

angular 

    .module('camListApp', []);

myCtl.controller.js

angular 

    .module('camListApp') 
    .controller('myCtl', myCtl); 

function myCtl($scope, myFactory) { 

    var vm = this; 
    vm.doSomething = myFactory.someFactoryFunction; 

}

myFactory.factory.js

angular 

    .module('camListApp') 
    .factory('myFactory', myFactory); 

function myFactory($http) { 

    return { 
     someFactoryFunction: retrieveSomeData 
    }; 

    function retrieveSomeData() { 

     $http.get('http://localhost:8080/camera/list') 

     .then(success) 
     .catch(error); 

     function success(response) { 
      return response.data; 
     } 

     function error(response) { 
      // handle error 
     } 

    } 

}

view.html

... 
<div ng-controller="myCtl"> 
    <button ng-click="vm.doSomething()">View</button> 
</div> 
...

nicht sicher, ob der Code über 100% ist arbeiten, haben es nicht ausprobiert, aber die Logik bleibt gleich

Quelle

2016-06-14 13:08:50 matt93

Mit zwei ng-Controller mit AngularJS

Antwort

lesen Sie die Dokumentation zunächst - angularjs docs

Verwandte Themen