Question

我正在构建一个设置模式窗口，使用alertify.js来更改页面的背景，但是当alertify.js创建包含我的下拉列表的html实例时，select会丢失ng-change功能，但如果下拉列表在页面上，那么它可以工作。

从下拉列表中选择任何内容，您将收到

发出的警报

ng-change =“main.unitChanged（）” 但模态窗口没有

当窗口弹出时，如何使用ng-change进行此操作？

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  var self = this;

  self.backGroundSelected = 'Balloon';

  self.fontSizes = [
    '8',
    '14',
    '20'
  ];

  self.unitChanged = function(selectedOption) {
    alert(selectedOption);
  };

  self.changeBackground = [
    'Balloon',
    'Billboard',
    'BusStop',
    'GirlWithBalloons',
    'GreenField',
    'NatureCouple',
    'RedFlowers',
    'PrescriptionPad',
    'SeniorMan',
    'SunCouple',
    'Victory',
    'WhiteFlowers',
    'WomanWithTree',
  ];

  self.typeOfFont = [
    'Serif',
    'Sans-serif',
    'Roboto'
  ];

  self.legendAboutOption = function() {
    alertify.alert(document.getElementById("configuration").innerHTML).set('title', 'Back-Ground Settings').set('transition', 'pulse').set('resizable', true).resizeTo('35%', '70%');

  }


});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/alertify.min.css" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/alertifyjs/1.4.1/css/themes/default.min.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
  <script src="//cdn.jsdelivr.net/alertifyjs/1.4.1/alertify.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as main">
  <div class="btn-group" role="group">

    <button type="button" class="btn btn-primary   glyphicon glyphicon-cog" ng-click="main.legendAboutOption()">Display Window</button>
    <br>
    <br>
    <br>
    <br>
  </div>



  <!--Templates For modal box-->
  <div class="container-fluid" id="configuration" style="display:block">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="row">
              <div class="col-md-2">
                <span class="label label-default">Backgrounds:Will fire an alert on ng-change</span>
              </div>
              <div class="col-md-3">
                <select ng-model="myBackGround" ng-change="main.unitChanged(myBackGround)" ng-options="BackGround for BackGround in main.changeBackground">
                  <option value="">Choose Template</option>
                </select>
              </div>
              <div class="col-md-7">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>



</body>

</html>

Answer 1

您的事件在模态中停止触发的原因是因为您正在创建视图的新副本，您应该传递视图元素本身。

Updated Plunker

self.legendAboutOption = function(){
    alertify.alert(document.getElementById("configuration"))
            .set({'title': 'Background Settings','transition':'pulse','resizable':true})
            .resizeTo('35%', '70%');
}

NG-CHANGE不会在alertify弹出窗口实例

1 个答案: