這是我的JS文件有兩個NG-控制器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; 
    }; 
}]);

這是我的HTML文件

<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>

我怎麼能有兩個控制器在應用中的工作？因爲我無法找到任何方式讓他們同時工作。第一個控制器是使用angularjs來使用我的web服務，但是這能夠工作，並且我添加了另一個使用切換按鈕來顯示和隱藏的控制器。

來源

2016-06-14 Alvin Wee

'div'不在'tr'一個有效的元素。另外，有沒有任何控制檯錯誤？ – devqon

像@devqon寫道，你的HTML是無效的，你甚至不關閉你的div與ng-controller – kTT

所以我應該把div放在哪裏？ –

您的代碼有幾個問題。首先，div作爲tr的孩子不是有效的元素，因此丟失那一個。

其次，你custom屬性是你的第二個控制器之外，如果你保持現在的作用域：

<!-- 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>

看你的作用域你應該只使用第一控制器，並把代碼放在一個：

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; 
     }); 
    }]);

來源

2016-06-14 12:33:31 devqon

那麼我應該如何把代碼放在我的第一個控制器？ –

它的工作原理！我只是刪除第二個控制器，並按照你的方法。 –

閱讀文檔第一 - angularjs docs

的回答你的問題是 - 沒有，你的.html文件可能有一個控制器

但如果你想重用你的邏輯，它是通過工廠和服務做 - angularjs docs

另一必讀：angularjs good practice

讓我們應用上你的代碼

個

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> 
...

不知道上面的代碼是100％的工作，沒試出來，但邏輯保持不變

來源

2016-06-14 13:08:50 matt93

有兩個NG-控制器angularJS

回答

閱讀文檔第一 - angularjs docs

相關問題