Question

      local alert = native.showAlert( "Error Logging In", "There was an error logging in.", { "Try again" }  )

控制器未存储ng-model的值。最初我只使用指令来构建这个应用程序，这是有效的，但后来我必须设置各种输入的默认值，所以我使用的是控制器。

另外，我在控制台中收到此错误

var app = angular.module("colorIt",[]);
app.controller("ColorCtrl",function() {
  this.shape = '';
  this.style = {
    'border-color': '',
    'background-color': '',
    'border-width': '',
    'border-style': ''
  };
});

<!Doctype html>
<html data-ng-app="colorIt">

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/app.css">
    <link href="https://fonts.googleapis.com/css?family=Niconne|Quicksand:400,700" rel="stylesheet">
    <title>Colorit</title>
</head>

<body>
    <div id="user">
        <h1>Colorit</h1>
        <div id="inputs">
            <label for="shapes">Shape</label>
            <select class="shapes" name="shapes" ng-model="shape">
            <option value="">Select Shape</option>
            <option value="square">Square</option>
            <option value="circle">Circle</option>
          </select>
            <label for="background-color">Background Color</label>
            <input type="color" name="background-color" ng-model="style['background-color']">
            <label for="border-style">Border Style</label>
            <input type="text" name="border-style" value="solid" ng-model="style['border-style']" placeholder="solid dashed dotted inset">
            <label for="border-width">Border Width</label>
            <input type="text" name="border-width" value="2px" ng-model="style['border-width']" placeholder="2px 4px 2px 4px">
            <label for="border-color">Border Color</label>
            <input type="color" name="border-color" ng-model="style['border-color']" ng-init="#000" value="#000000">
            <label for="shadow">Box Shadow</label>
            <input type="text" name="shadow" ng-model="shadow" value="5px 5px 10px" placeholder="5px 5px 10px">
            <label for="shadow-color">Shadow Color</label>
            <input type="color" ng-model=color name="shadow-color" value="#000">
        </div>
    </div>
    <div id="display" ng-controller="ColorCtrl as color">
        <div ng-class="{{color.shape}}" ng-style="{{color.style}}">
            &nbsp;
            {{color.style['border-color']}},{{color.style['background-color']}},{{color.style['border-width']}}
        </div>
    </div>
    <script src="assets/js/colorit.js" charset="utf-8"></script>
</body>

</html>

Answer 1

将ng-controller="ColorCtrl as color"移至body标签，并在绑定中使用controllerAs reference color：

ng-model="color.style['border-width']

等。对于所有ngModels。

角度控制器未从ng-model接收值

1 个答案: