AngularJS 使用 Foundation - Reveal Modal 中的控制器不工作
AngularJS with Foundation - Controller in Reveal Modal does not work
我在使用方面经验不多AngularJS,但我不是新手。已经使用了一点点。
但是,我正在使用 AngularJS 和 Zurb Foundation 6。
我的显示模态中的控制器不会使用任何 angular。
例如我可以写 {{hallo}}
而他不会渲染它,他会显示 {{hallo}}
而不是这个变量的值。
你必须知道,这个模式在 angular 的模板文件中,因为我正在使用 angular-route。
奇怪的是,我已经在 index.html 文件中使用模态,并且模态作品中有 angular。但是模板文件中的模式(称为 dashboard.html)不起作用。
这是我的模态:
<div class="row">
<div class="columns large-12 medium-12 small-12" ng-controller="LoadAllUsers">
<button class="button" data-open="newUserModal" ng-click="load()">User hinzufügen</button>
<!-- newUserModal -->
<div class="tiny reveal" id="newUserModal" data-reveal>
<div class="large-12 medium-12 small-12 columns">
<div class="row">
<h4 class="text-center">User zur Miete hinzufügen</h4>
<br>
<label>Username oder Name des neuen Users eingeben</label>
<input type="text" placeholder="Max Mustermann" name="newuser" ng-model="userSearch" ng-change="search()">
<h5>Suchtreffer</h5>{{hallo}}
<button class="button" data-close>Abbrechen</button>
<button class="button float-right">User hinzufügen</button>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /newUserModal -->
<button class="button">Miete zurückziehen</button>
</div>
</div>
</div>
我的控制器是这样的
routingApp.controller("LoadAllUsers", function($scope, $http) {
$scope.load = function() {
var allUsers = [];
$http({
method: 'GET',
url: 'someURL',
params: {parameters: "values"}
}).then(function successCallback(response) {
angular.forEach(response.data, function(value, key) {
allUsers[key] = {};
angular.forEach(value, function(subvalue, subkey) {
allUsers[key][subkey] = subvalue;
});
});
$scope.hallo = "AN";
console.log(allUsers);
}, function errorCallback(error) {
console.log(JSON.stringify(error.data));
});
};
$scope.search = function() {
console.log($scope.userSearch);
};
$scope.hallo = "HAAAAAAAAAAALLO";
});
如果有人能帮助我,我将不胜感激。
谢谢
我找到了解决方案:我向用户 Angular Foundation 6 致敬。你要知道的是,它现在正在开发中,所以它可能不如 Angular Foundation 5 稳定。
但是,它帮助我解决了问题。
我在使用方面经验不多AngularJS,但我不是新手。已经使用了一点点。
但是,我正在使用 AngularJS 和 Zurb Foundation 6。
我的显示模态中的控制器不会使用任何 angular。
例如我可以写 {{hallo}}
而他不会渲染它,他会显示 {{hallo}}
而不是这个变量的值。
你必须知道,这个模式在 angular 的模板文件中,因为我正在使用 angular-route。 奇怪的是,我已经在 index.html 文件中使用模态,并且模态作品中有 angular。但是模板文件中的模式(称为 dashboard.html)不起作用。
这是我的模态:
<div class="row">
<div class="columns large-12 medium-12 small-12" ng-controller="LoadAllUsers">
<button class="button" data-open="newUserModal" ng-click="load()">User hinzufügen</button>
<!-- newUserModal -->
<div class="tiny reveal" id="newUserModal" data-reveal>
<div class="large-12 medium-12 small-12 columns">
<div class="row">
<h4 class="text-center">User zur Miete hinzufügen</h4>
<br>
<label>Username oder Name des neuen Users eingeben</label>
<input type="text" placeholder="Max Mustermann" name="newuser" ng-model="userSearch" ng-change="search()">
<h5>Suchtreffer</h5>{{hallo}}
<button class="button" data-close>Abbrechen</button>
<button class="button float-right">User hinzufügen</button>
</div>
</div>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- /newUserModal -->
<button class="button">Miete zurückziehen</button>
</div>
</div>
</div>
我的控制器是这样的
routingApp.controller("LoadAllUsers", function($scope, $http) {
$scope.load = function() {
var allUsers = [];
$http({
method: 'GET',
url: 'someURL',
params: {parameters: "values"}
}).then(function successCallback(response) {
angular.forEach(response.data, function(value, key) {
allUsers[key] = {};
angular.forEach(value, function(subvalue, subkey) {
allUsers[key][subkey] = subvalue;
});
});
$scope.hallo = "AN";
console.log(allUsers);
}, function errorCallback(error) {
console.log(JSON.stringify(error.data));
});
};
$scope.search = function() {
console.log($scope.userSearch);
};
$scope.hallo = "HAAAAAAAAAAALLO";
});
如果有人能帮助我,我将不胜感激。 谢谢
我找到了解决方案:我向用户 Angular Foundation 6 致敬。你要知道的是,它现在正在开发中,所以它可能不如 Angular Foundation 5 稳定。 但是,它帮助我解决了问题。