Angularjs 在angular中使用模态对话框时绑定中断
我正在为我的角度应用程序使用模态对话框指令。它表现出一些我不太理解的奇怪行为。当我将变量直接附加到控制器的$scope并在对话框中引用它们时，绑定会中断。在对话框中更改其值对控制器中的变量没有影响。但是如果我将变量作为属性添加到一个对象，然后将该对象添加到$scope中，它就会工作。换句话说，如果我这样做Angularjs 在angular中使用模态对话框时绑定中断,angularjs,binding,angularjs-scope,Angularjs,Binding,Angularjs Scope,我正在为我的角度应用程序使用模态对话框指令。它表现出一些我不太理解的奇怪行为。当我将变量直接附加到控制器的$scope并在对话框中引用它们时，绑定会中断。在对话框中更改其值对控制器中的变量没有影响。但是如果我将变量作为属性添加到一个对象，然后将该对象添加到$scope中，它就会工作。换句话说，如果我这样做 $scope.v1 = 1 $scope.v2 = 'abc' 它不起作用，但如果我起作用 $scope.myData = { v1: 1, v2: 'abc' } 事情进展顺
$scope.v1 = 1
$scope.v2 = 'abc'
$scope.myData = {
v1: 1,
v2: 'abc'
}
使用对象时传递指针，传递基本体时传递值。当值更改时，它们不会指向任何东西，但当对象的属性更改时，指针会更新。字符串是否被视为基本值？是。除非使用字符串构造函数调用。新字符串（'abc'）。您能在绑定的地方发布html代码吗？我无法加载plunker。我添加了代码。第一次使用plunker。他们帮我停下来，好吧，但也许我做错了什么。
<!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;
};
});