如何在单击按钮时弹出弹出窗口，但使用 Angular 制作一个按钮 2 个文本和 2 个弹出窗口？

Question

嗨，朋友们，这里只有一个按钮，但如果您点击它，按钮的文字会发生变化，

我需要的是，如果我单击按钮 1，应该会出现一个弹出窗口，如果我单击确定，则在弹出窗口中按钮应该更改为按钮 2

点击 button2 时应该会出现另一个弹出窗口。这就是功能。

这里小提琴http://jsfiddle.net/Ljrpd/23/这里我实现了一个按钮两个文本切换

HTML

 <button ng-click="toggle = !toggle">{{toggleText}}</button>

脚本

   var app = angular.module('my-app', [], function () {

  })

app.controller('AppController', function ($scope) {
$scope.toggle = true;

$scope.$watch('toggle', function(){
    $scope.toggleText = $scope.toggle ? 'Button1' : 'Button2';
})
})

有人帮我解决这个问题。谢谢

Answer 1

首先制作一个关于控制器的course： 创建这样的视图：

<div ng-controller="PopumController as popup">
<button ng-click="popup.showPopup()">{{popup.toggleText}}</button>
<div class="popup">
    <button>cancel</button>
    <button ng-click="popup.switch(true)>OK</button>
</div>
</div>

并为此创建基本控制器：

app.controller('PopupController', function ($scope) {
    $scope.switch = function(value){
        $scope.toggle = value;
    }
    $scope.toggle = false;  

    $scope.$watch('toggle', function(){
        $scope.toggleText = $scope.toggle ? 'Button1' : 'Button2';
    })
    $scope.showPopup = function(){
    if ( $scope.toggle == false ) 
        popup1.opened = true;
    else
        popup2.opened = true;
    }
})

然后安装bootsrap-ui 进行应用。 并注入 rootScope 和对话服务：

  app.controller('PopupController',['$rootScope','$dialog', function ($scope,$dialog) {
        $scope.switch = function(value){
            $scope.toggle = value;
        }
        $scope.toggle = false;  

        $scope.$watch('toggle', function(){
            $scope.toggleText = $scope.toggle ? 'Button1' : 'Button2';
        })
        $scope.showPopup = function(){
        if ( $scope.toggle == false ) 
            $dialog.dialog({}).open('popup1.html');  
        else
            $dialog.dialog({}).open('popup2.html');  
        }
    }]) 

在上面的模块中，别忘了添加bootstrap-ui模块：

var app = angular.module('my-app', ['bootstrap-ui], function () {