我已经创建了角度组件，代码如下所示：
(function () {
'use strict';
angular
.module('App', ['ngMaterial']).component('autoComplete', {
template: '<div layout="column" ng-cloak>\
<md-content class="md-padding">\
<form ng-submit="$event.preventDefault()">\
<md-autocomplete ng-disabled="$ctrl.isDisabled"\
md-no-cache="$ctrl.noCache"\
md-selected-item="$ctrl.selectedItem"\
md-search-text-change="$ctrl.searchTextChange($ctrl.searchText)"\
md-search-text="$ctrl.searchText"\
md-selected-item-change="$ctrl.selectedItemChange(item)"\
md-items="item in $ctrl.querySearch($ctrl.searchText)"\
md-item-text="item.display"\
md-min-length="0"\
placeholder="Search State">\
<md-item-template>\
<span md-highlight-text="$ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>\
</md-item-template>\
<md-not-found>\
No states matching "{{$ctrl.searchText}}" were found.\
<a ng-click="$ctrl.newState($ctrl.searchText)">Create a new one!</a>\
</md-not-found>\
</md-autocomplete>\
<br />\
</form>\
</md-content>\
</div>',
controller: function DemoCtrl($timeout, $q, $log, $http) {
$log.info('Called');
var self = this;
self.simulateQuery = false;
self.isDisabled = false;
// list of `state` value/display objects
self.states = loadAll($http);
self.querySearch = querySearch;
self.selectedItemChange = selectedItemChange;
self.searchTextChange = searchTextChange;
self.newState = newState;
function newState(state) {
alert("Sorry! You'll need to create a Constitution for " + state + " first!");
}
// ******************************
// Internal methods
// ******************************
/**
* Search for states... use $timeout to simulate
* remote dataservice call.
*/
function querySearch(query) {
//var results = query ? self.states.filter(createFilterFor(query)) : self.states,
// deferred;
//if (self.simulateQuery) {
// deferred = $q.defer();
// $timeout(function () { deferred.resolve(results); }, Math.random() * 1000, false);
// return deferred.promise;
//} else {
// return results;
//}
var allStates;
return $http.get("/Home/GetStates", { params: { q: query } })
.then(function (response) {
allStates = response;
return allStates.data.split(/, +/g).map(function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
})
//$http({
// method: 'GET',
// url: '/Home/GetStates'
//}).then(function successCallback(response) {
// allStates = response;
//}, function errorCallback(response) {
// alert(response);
// return false;
//});
}
function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
function selectedItemChange(item) {
$log.info('Item changed to ' + JSON.stringify(item));
}
/**
* Build `states` list of key/value pairs
*/
function loadAll($http) {
//var allStates;
//$http({
// method: 'GET',
// url: '/Home/GetStates'
//}).then(function successCallback(response) {
// allStates = response;
// return allStates.split(/, +/g).map(function (state) {
// return {
// value: state.toLowerCase(),
// display: state
// };
// });
//}, function errorCallback(response) {
// alert(response);
// return false;
//});
}
/**
* Create filter function for a query string
*/
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
})
})();并且我在新的javascript文件中创建了一个控制器，它看起来如下。
(function () {
var app = angular.module("App", []);
var TestController = function ($scope) {
$scope.Display = "Test Display";
};
app.controller("TestController", ["$scope", TestController]);
}());这是我的HTML
<html ng-app="App" ng-cloak>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/angular.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script type="text/javascript">
/**
* You must include the dependency on 'ngMaterial'
*/
angular.module('App', ['ngMaterial']);
</script>
<script src="~/Scripts/TestAngular.js"></script>
<script src="~/Scripts/Component/auto-complete.component.js"></script>
<!-- Your application bootstrap -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body>
<div ng-controller="TestController">
<input type="text" ng-model="Display" />
{{Display}}
</div>
<auto-complete></auto-complete>
</body>
</html>当试图运行此HTML时，我收到Testcontroller注册错误。但是，如果我删除了auto-complete.component.js，那么TestController可以正常工作。请帮我解决这个问题。
您正在弄乱模块声明，要么声明一次，要么正确执行。
声明模块后，即可使用
angular.module('App')
因此，在您的html文件中，没有任何变化，但是在其他两个文件中，都替换了angular.module('App',[..]) byangular.module（'App'）。
这是实现此目标的最佳做法，将每个组件都隔离在隔离的(function(){ .. })()块中
对于您的问题，我通过将第一个调用脚本（在html中为内联）更改为：
var app = angular.module('App', ['ngMaterial']);
然后我使用此变量，而不是每次都重新定义一个新模块：
(function(app){
// controller or component here
}(app));
这是成功的窍门，但是这一步是一些更复杂的模块改写。此外，应避免这样的全局变量
我的TestController：
(function (app) {
var TestController = function ($scope) {
$scope.Display = "Test Display";
};
app.controller("TestController", ["$scope", TestController]);
}(app));我的自动填充组件：
(function (app) {
'use strict';
app.component('autoComplete', {
// ...
})
})(app);本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句