AngularJS 在一个应用程序中的 onclick 事件中有两个控制器
[英]AngularJS with two controllers in one app in an onclick event
问题描述
我正在做一个简单的角度示例，但无法弄清楚为什么它不起作用。 我似乎找到了它失败的地方，但没有找到原因。
这确实有效（直接调用 Test2 函数）：
Init(); Test1(); Test2(); //**DIRECTLY CALL THIS METHOD** function Init() { window.app = angular.module('MyApp', []); } function Test1() { app.controller('MySelectCtrl', function ($scope) { alert(1); }); } function Test2() { app.controller('MySelectCtrl2', function ($scope) { alert(2); }); }
<div data-ng-app="MyApp" > <p> <select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model"> <option data-ng-repeat="option in MyNames" value="{{$index}}">{{MyNames}}</option> </select> </p> <p> <select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" > <option data-ng-repeat="option in MyNames2" value="{{$index}}">{{MyNames2}}</option></option> </select> </p> </div>
虽然这不起作用（在 onclick 中调用 Test2 函数）：
Init(); Test1(); //Test2(); **CALLING THIS THROUGH ONCLICK IN THE FIRST SELECT BELOW** function Init() { window.app = angular.module('MyApp', []); } function Test1() { app.controller('MySelectCtrl', function ($scope) { alert(1); }); } function Test2() { app.controller('MySelectCtrl2', function ($scope) { alert(2); }); }
<div data-ng-app="MyApp" > <p> <select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model" onclick="Test2();"> <option data-ng-repeat="option in MyNames" value="{{$index}}">{{MyNames}}</option> </select> </p> <p> <select disabled="" data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" > <option data-ng-repeat="option in MyNames2" value="{{$index}}">{{MyNames2}}</option></option> </select> </p> </div>
我怎样才能只在 onclick 中运行 Test2() （即在单击第一个选择时执行 alert(2) ）？
注意：以上只是一个缩小的测试。 实际上，我希望根据第一个选择中选择的内容填充第二个选择（$http ajax 调用）。 我应该使用不同的方法来绑定该数据吗？
3 个解决方案
解决方案1
1 已采纳 2016-10-13 20:55:02
使用 Edmar Miyake 发布的链接。 我用你的代码创建了一个 Plunkr，它会给你你期望的行为：
https://plnkr.co/edit/aRr6JaTipXdTVACYOGuf?p=preview
注意：单击第一个选择元素不会加载第二个选择元素，除非您单击离开菜单（即关闭它，或选择一个值）。 如果您想在单击第一个元素后加载第二个元素，则需要使用“data-ng-mousedown”而不是“data-ng-click”。
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script type="text/javascript">
Init();
function Init() {
window.app = angular.module('plunker', []);
/*
Overriding main components using pattern from
https://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
*/
app.config(function ($controllerProvider, $provide, $compileProvider) {
console.log('config method ran');
app._controller = app.controller;
app._service = app.service;
app.factory = app.factory;
app._value = app.value;
app._directive = app.directive;
// provider-based controller
app.controller = function (name, constructor) {
$controllerProvider.register(name, constructor);
return(this);
};
// provider-based service
app.service = function (name, constructor) {
$provide.service(name, constructor);
return(this);
};
// provider-based factory
app.factory = function (name, factory) {
$provide.factory(name, factory);
return(this);
};
// provider-based value
app.value = function (name, value) {
$provide.value(name, value);
return(this);
};
// provider-based directive
app.directive = function (name, factory) {
$compileProvider.directive(name, factory);
return(this);
};
});
app.controller('appCtrl', function ($scope) {
/* showSecondSelectCtrl will control when Angular loads the second select element into the DOM */
$scope.showSecondSelectCtrl = false;
Test1();
$scope.Test2 = function () {
console.log('adding MySelectCtrl2');
app.controller('MySelectCtrl2', function ($scope) {
alert(2);
$scope.MyNames2 = ['nai', 'aru', 'machi'];
});
$scope.showSecondSelectCtrl = true;
}
});
}
/* Exposing this function on the global object is not "The Angular Way" of doing things.
Test1 should live inside of an Angular controller like Test2 does. */
function Test1() {
console.log('adding MySelectCtrl');
app.controller('MySelectCtrl', function ($scope) {
// alert(1);
$scope.MyNames = ['biff', 'marty', 'doc'];
});
}
</script>
</head>
<!-- auto-bootstrap Angular app with the name of 'plunker' -->
<body data-ng-app="plunker">
<!-- Specify a controller to allow dynamic rendering of second select element -->
<div data-ng-controller="appCtrl">
<p>
<!-- Using Angular's ng-click directive since Test2 should live inside of appCtrl -->
<select data-ng-controller="MySelectCtrl" name="repeatSelect" id="repeatSelect" data-ng-model="data.model" data-ng-click="Test2();">
<option value="">My Names</option>
<option data-ng-repeat="option in MyNames" value="{{$index}}">{{option}}</option>
</select>
</p>
<!-- We cannot render the second select element until the 'MySelectCtrl2' controller exists.
Since we are dynamically loading it, we need to hide it from the DOM until it is loaded
using ng-if -->
<p data-ng-if="showSecondSelectCtrl">
<select data-ng-controller="MySelectCtrl2" name="repeatSelect2" id="repeatSelect2" data-ng-model="data.model2" >
<option value="">My Names2</option>
<option data-ng-repeat="option in MyNames2" value="{{$index}}">{{option}}</option>
</select>
</p>
</div>
</body>
</html>
解决方案2
0 2016-10-12 22:32:12
我不认为它会起作用。 在您的应用程序已经被引导（延迟绑定）之后，您正尝试添加一个新控制器。
看看这篇文章。 它将向您展示如何做到这一点： https : //www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
解决方案3
0 2016-10-12 23:27:00
解决方案似乎是一个控制器和两个模块：jsfiddle.net/TheSharpieOne/Xku9z/1
AngularJS如何从一个网站运行两个控制器，并更改其中一个
[英]AngularJS How would one run two controllers from one website, and have one of them change
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.