angular遇到问题

时间:2023-03-09 13:31:26
angular遇到问题

一、一个js中只有一个angunlar.module,但可以有多个controller,从而控制多个不同的作用域,每个作用域都有独立的$scope。不同作用域之间又有$rootScope这个桥梁

二、在repeat多个li的时候,ng-controller应该写在ul外部的div中,而不是ul中

三、使用angulat-animate用ng-hide设置动画时不能给动画的元素id后设置样式,应该给其他

四、先说一下,下面的“实现”指的是,在input输入文字,p里面会随之改变,也就是双向绑定。(我貌似陷入了程序语言的思想中(⊙﹏⊙)b)

代码一

<div ng-app="app" ng-controller="ctrl">
<p>{{name}}</p>
<div>
<input type="text" ng-model="name">
</div>
</div>
 var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.name="meng";
})

结果:能"实现"

代码二

<div ng-app="app" ng-controller="ctrl">
<p>{{name}}</p>
<div ng-if="show">
<input type="text" ng-model="name">
</div>
</div>
  var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.show=true;
$scope.name="meng";
})

结果:不能“实现”

http://huangtengfei.com/2015/09/scope-in-angularjs/

归纳一句话就是,ng-if会产生新的作用域,so。。

那么如何改呢?看下面代码:

<div ng-app="app" ng-controller="ctrl">
<p>{{data.name}}</p>
<div ng-if="data.show">
<input type="text" ng-model="data.name">
</div>
</div>
var app = angular.module("app", []);
app.controller("ctrl", function ($scope) {
$scope.data = {};
$scope.data.show = true;
$scope.data.name = "meng"
})

能“实现”

解决的原理是:创建一个引用型变量。随之导致两者操纵的是同一个作用域就行了╮(╯▽╰)╭