带有 SweetAlert 的 innerHTML 中的 AngularJS

Question

我正在尝试在 SweetAlert 中构建登录/注册表单。

一切正常，但我正在尝试使用由数组中的 ng-repeat 组成的选项进行选择。

这是我的代码：

我的innerHTML的一部分：

var registerForm = document.createElement("div");
registerForm.innerHTML = "<form><div class=\"row\"><div class=\"col-lg-6\"><label style=\"float: left;\" for=\"firstname\"><b>Firstname:</b></label><input type=\"text\" id=\"firstname\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"lastname\"><b>Lastname:</b></label><input type=\"text\" id=\"lastname\" class=\"form-control\">
<label style=\"float: left;\" for=\"login\"><b>Login:</b></label><input type=\"text\" id=\"login\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"password\"><b>Password:</b></label><input type=\"password\" id=\"password\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"password-again\"><b>Repeat Password:</b></label><input type=\"password\" id=\"password-again\" class=\"form-control\"></div> 
<div class=\"col-lg-6\"><label style=\"float: left;\" for=\"email\"><b>E-Mail:</b></label><input type=\"text\" id=\"email\" class=\"form-control\">
<label style=\"float: left;\" for=\"city\"><b>City:</b></label><input type=\"text\" id=\"city\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"postal\"><b>Postal Code:</b></label><input type=\"text\" id=\"postal\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"adress\"><b>Adress:</b></label><input type=\"text\" id=\"adress\" class=\"form-control\">
<label style=\"float: left;\" for=\"country\"><b>Country:</b></label><select class=\"form-control\" ng-model=\"countires\" required><option ng-repeat=\"item in countries\" value=\"{{item.id}}\">{{item.name}}</option></select>
</div>
<div class=\"col-lg-12\"><p style=\"float:left;\">Fields marked with <span class=\"redstar\"><b>*</b></span> are required.</p></div></div></form>";

我的 swal 以及我如何将我的 html 放入其中：

$scope.registerSwal = function(){
    swal({
      title: 'Sign Up',
      text: 'Create a new account.',
      content: registerForm,
      buttons: {
        stop: {
        text: "Cancel",
        className: "red-modal-button",
        },
        ok: {
          text: "Register",
          value: "ok",
          className: "green-modal-button",
        },
      }
    });
}

我的国家/地区数组：

$scope.countries = {1 : {name: 'Poland', id: 1}, 1 : {name: 'Holland', id: 2}};

这是输出：

问题是我在innerHTML 的选择选项中的ng-repeat 不起作用。有什么办法可以吗？

Answer 1

不要在没有 directive 的情况下在 AngularJS 中操作 DOM：

在高层次上，指令是 DOM 元素（例如属性、元素名称、注释或 CSS 类）上的标记，它告诉 AngularJS 的 HTML 编译器（$compile）将指定的行为附加到该 DOM 元素（例如，通过事件监听器），甚至转换 DOM 元素及其子元素。

注意： $scope.countries 不是数组。我把它变成了一个数组。

查看

<div ng-controller="MyCtrl">
  <my-directive countries="countries"></my-directive>
</div>

AngularJS 应用程序：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.countries = [
      {name: 'Poland', id: 1},
      {name: 'Holland', id: 2}
    ];
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'E',
      scope: {
        countries: '='
      },
      template: `<form>
            <div class="row">
                <div class="col-lg-6"><label style="float: left;" for="firstname"><b>Firstname:</b></label>
                    <input type="text" id="firstname" class="form-control">
                    <label style="float: left;" for="lastname"><b>Lastname:</b></label>
                    <input type="text" id="lastname" class="form-control">
                    <label style="float: left;" for="login"><b>Login:</b></label>
                    <input type="text" id="login" class="form-control">
                    <label style="float: left;" for="password"><b>Password:</b></label>
                    <input type="password" id="password" class="form-control">
                    <label style="float: left;" for="password-again"><b>Repeat Password:</b></label>
                    <input type="password" id="password-again" class="form-control">
                </div>
                <div class="col-lg-6"><label style="float: left;" for="email"><b>E-Mail:</b></label>
                    <input type="text" id="email" class="form-control">
                    <label style="float: left;" for="city"><b>City:</b></label>
                    <input type="text" id="city" class="form-control">
                    <label style="float: left;" for="postal"><b>Postal Code:</b></label>
                    <input type="text" id="postal" class="form-control">
                    <label style="float: left;" for="adress"><b>Adress:</b></label>
                    <input type="text" id="adress" class="form-control">
                    <label style="float: left;" for="country"><b>Country:</b></label>
                    <select class="form-control" ng-model="countires" required>
                        <option ng-repeat="item in countries" value="{{item.id}}">
                            {{item.name}}
                        </option>
                    </select>
                </div>
                <div class="col-lg-12">
                    <p style="float:left;">Fields marked with <span class="redstar"><b>*</b>
                    </span> are required.</p>
                </div>
            </div>
        </form>` 
    }
});

> Demo fiddle

Answer 2

您需要将registerForm 编译到作用域中才能在作用域上使用ng-repeat。

$compile(registerForm)($scope);

Answer 3

更改对象中的重复键即可。

$scope.countries = {1 : {name: 'Poland', id: 1}, 2 : {name: 'Holland', id: 2}};

演示：https://plnkr.co/edit/pE6EGWS5oV4WUEzCzrCr?p=preview