Question

我正在为我的角度应用程序使用ngModal模式对话框指令。它显示了一些我不太了解的奇怪行为。当我将变量直接附加到控制器的$ scope并在对话框中引用它们时，绑定会中断。在对话框中更改它们的值对控制器中的变量没有影响。但是，如果我将变量作为属性添加到对象，然后将对象添加到$ scope，它就可以工作。换句话说，如果我这样做

$scope.v1 = 1
$scope.v2 = 'abc'

它不起作用，但如果我这样做

$scope.myData = {
   v1: 1,
   v2: 'abc'
}

事情很好。这笔交易是什么？您可以看到代码here的工作版本和损坏版本here。

如果插件应用程序没有为您加载，请输入以下代码：

HTML

<!DOCTYPE html>
<html data-ng-app='ngModalDemo'>
  <head>
    <title>ngQuickDate Demo</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="ng-modal.css" media="all" />
    <style type='text/css'>
      body{font-family:'Helvetica Neue',Helvetica,sans-serif}
      h1 { padding: 0; margin: 0; }
      .ng-cloak { display: none; }
    </style>
  </head>
  <body>
    <div ng-controller='DemoController'>
      <modal-dialog show='myData.modalShown' width='500px' dialog-title='Modal Dialog Title' on-close='logClose()'>
        <p>This is some html content</p>
        <p>
          <label for='hello'>Hello:</label>
          <input type='text' name='hello' ng-model='myData.hello' />
        </p>
        <p>
          <label for='foo'>Foo:</label>
          <input type='text' name='foo' ng-model='myData.foo' />
        </p>
        <img src='http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg' width='300px'/>
      </modal-dialog>
      <button ng-click='toggleModal()'>Toggle Modal</button>
      <br/>
      <br/>
      <br/>
      <p><strong>Shown?</strong> {{myData.modalShown}}</p>
      <p><strong>Hello</strong>: {{myData.hello}}</p>
      <p><strong>Foo</strong>: {{myData.foo}}</p>
    </div>
    <script type="text/javascript" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script type="text/javascript" src="ng-modal.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="controller.js"></script>
  </body>
</html>

角度应用

app.config(function(ngModalDefaultsProvider) {
    return ngModalDefaultsProvider.set({
        closeButtonHtml: "<i class='fa fa-times'></i>"
    });
});

角度控制器

app = angular.module('ngModalDemo')

app.controller('DemoController', function($scope) {
    $scope.myData = {
      link: "http://google.com",
      modalShown: false,
      hello: 'world',
      foo: 'bar'
    }

    $scope.logClose = function() {
      console.log('close!');
    };
    $scope.toggleModal = function() {
      $scope.myData.modalShown = !$scope.myData.modalShown;
    };
});

在角度中使用模态对话框时断开绑定

0 个答案: