Angularjs 使用模式中的单选按钮更改元素的类（角度UI引导：从模式对话框窗口检索值）
我使用模态对话框和单选按钮来更改元素的类。课程分为主题1、主题2和主题3。我尝试了指令ng类，但这是不可能的，因为我需要为单选按钮提供一个相同的ng模型 通过模式对话框中的{theme}，我得到了按钮的值。在模态对话框之外，它不起作用 即使在结束对话后，我也可以换课。但是在我的ModalinstanteCtrl中我怎么能做到这一点呢？ 你有小费吗 HTMLAngularjs 使用模式中的单选按钮更改元素的类（角度UI引导：从模式对话框窗口检索值）,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我使用模态对话框和单选按钮来更改元素的类。课程分为主题1、主题2和主题3。我尝试了指令ng类，但这是不可能的，因为我需要为单选按钮提供一个相同的ng模型 通过模式对话框中的{theme}，我得到了按钮的值。在模态对话框之外，它不起作用 即使在结束对话后，我也可以换课。但是在我的ModalinstanteCtrl中我怎么能做到这一点呢？ 你有小费吗 HTML <h1 ng-model="theme">The new class: {{theme}}</h1> 通过模式对话
<h1 ng-model="theme">The new class: {{theme}}</h1>
<!DOCTYPE html>
<html>
<head>
<!-- For html5 (default is UTF-8) -->
<meta charset="UTF-8">
<!-- For Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<title>Test</title>
<!-- Bootstrap3 -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- app.css -->
<link href="app.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-controller="MainWindowCtrl">
<button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
<div ng-show="main.theme">Selection from the modal dialog was: {{main.theme}}</div>
</div>
<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Angular UI-Bootstrap -->
<script src="angular-ui-bootstrap-0.12.js"></script>
<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- For html5 (default is UTF-8) -->
<meta charset="UTF-8">
<!-- For Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<title>Test</title>
<!--Bootstrap3 -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- app.css -->
<link href="app.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-controller="MainWindowCtrl">
<button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
<div ng-show="main_data.theme">Theme from the modal dialog was: {{main_data.theme}}</div>
<div ng-show="main_data.border">Border from the modal dialog was: {{main_data.border}}</div>
</div>
<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Angular UI-Bootstrap 0.12 -->
<script src="angular-ui-bootstrap-0.12.js"></script>
<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- For html5 (default is UTF-8) -->
<meta charset="UTF-8">
<!-- For Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<title>Test</title>
<!-- Bootstrap3 -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- app.css -->
<link href="app.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-controller="MainWindowCtrl">
<button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
<div ng-show="main.theme">Selection from the modal dialog was: {{main.theme}}</div>
</div>
<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Angular UI-Bootstrap -->
<script src="angular-ui-bootstrap-0.12.js"></script>
<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!-- For html5 (default is UTF-8) -->
<meta charset="UTF-8">
<!-- For Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->
<title>Test</title>
<!--Bootstrap3 -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- app.css -->
<link href="app.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-controller="MainWindowCtrl">
<button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
<div ng-show="main_data.theme">Theme from the modal dialog was: {{main_data.theme}}</div>
<div ng-show="main_data.border">Border from the modal dialog was: {{main_data.border}}</div>
</div>
<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Angular UI-Bootstrap 0.12 -->
<script src="angular-ui-bootstrap-0.12.js"></script>
<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h4>Theme:</h4>
<div class="btn-group btn-theme">
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme1')"
ng-class="{active: ifThemeIs('theme1')}">Light</button>
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme2')"
ng-class="{active: ifThemeIs('theme2')}">Dark</button>
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme3')"
ng-class="{active: ifThemeIs('theme3')}">Grey</button>
</div>
<div>Current theme choice: {{dialog_data.theme}}</div>
<h4>Border:</h4>
<div class="btn-group btn-theme">
<button class="btn btn-default btn-theme-label"
ng-click="setBorder('solid')"
ng-class="{active: ifBorderIs('solid')}">Solid</button>
<button class="btn btn-default btn-theme-label"
ng-click="setBorder('dashed')"
ng-class="{active: ifBorderIs('dashed')}">Dashed</button>
</div>
<div>Current border choice: {{dialog_data.border}}</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
我是模态的！
主题：
轻的
黑暗的
灰色
当前主题选择：{{dialog_data.theme}
边界：
固体
冲刺
当前边框选择：{{dialog_data.border}
好啊
取消
$scope.dialog.theme$modalInstance.close（）$modalInstance.close（$scope.dialog）$scope.dialogvar app = angular.module("myApp", ['ui.bootstrap']);
app.controller('MainWindowCtrl', ['$scope', '$modal', function($scope, $modal) {
$scope.open = function() {
$modal.open({
templateUrl: 'myModalContent.html',
controller: 'DialogWindowCtrl',
})
.result.then(function(dialog_data) {
$scope.main_data = dialog_data;
//equivalent to: $scope.main_data = {theme: 'selected theme', border: 'selected border'}
});
};
}]);
app.controller('DialogWindowCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) {
var dialogWindow = $modalInstance;
$scope.dialog_data = {
theme: 'theme1',
border: 'solid'
};
$scope.setTheme = function(theme) {
$scope.dialog_data.theme = theme;
}
$scope.ifThemeIs = function(theme) {
return $scope.dialog_data.theme === theme;
}
$scope.setBorder = function(border) {
$scope.dialog_data.border = border;
}
$scope.ifBorderIs = function(border) {
return $scope.dialog_data.border === border;
}
$scope.ok = function () {
dialogWindow.close($scope.dialog_data); //***PASS DATA TO MAIN WINDOW***
};
$scope.cancel = function () {
dialogWindow.dismiss('cancel');
};
}]);
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<h4>Theme:</h4>
<div class="btn-group btn-theme">
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme1')"
ng-class="{active: ifThemeIs('theme1')}">Light</button>
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme2')"
ng-class="{active: ifThemeIs('theme2')}">Dark</button>
<button class="btn btn-default btn-theme-label"
ng-click="setTheme('theme3')"
ng-class="{active: ifThemeIs('theme3')}">Grey</button>
</div>
<div>Current theme choice: {{dialog_data.theme}}</div>
<h4>Border:</h4>
<div class="btn-group btn-theme">
<button class="btn btn-default btn-theme-label"
ng-click="setBorder('solid')"
ng-class="{active: ifBorderIs('solid')}">Solid</button>
<button class="btn btn-default btn-theme-label"
ng-click="setBorder('dashed')"
ng-class="{active: ifBorderIs('dashed')}">Dashed</button>
</div>
<div>Current border choice: {{dialog_data.border}}</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>