AngularJS实例,Angular,AngularJS 在线

720AngularJS 控制器

关于 controller 中作用域的问题，@Butters 的例子不怎么经典，可以换成这个例子：

var app = angular.module("myApp", []);
app.controller("ctr1",
function($scope, $rootScope) {
    $scope.firstName = "AAA";
    $rootScope.secondName = "BBB";
    $scope.btn = function() {
        alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
    }
});
app.controller("ctr2",
function($scope, $rootScope) {
    $scope.secondName = "CCC";
    $rootScope.firstName = "DDD";
    $scope.btn = function() {
        alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
    }
});
app.controller("ctr5",
function($scope, $rootScope) {
    $scope.names = ["111", "222", "333"];
    $scope.btn = function() {
        alert($scope.firstName + " " + $rootScope.firstName + "===" + $scope.secondName + " " + $rootScope.secondName);
    }
});

尝试一下 »

719AngularJS 控制器

关于 controller 中作用域的问题：

controller 中，如果局部 $scope 和 $rootScope 都存在，且有相同名字的变量，{{变量名}} 指局部变量而不是全局变量，作用域只有当前 controller；{{$root.变量名}} 是全局变量，在 ng-app="" 下任何一个 controller 中都能使用。如果没有 $scope, 只有 $rootScope，那么 {{变量名}} 和 {{$root.变量名}} 就没区别了。

<body ng-app="myApp">
<div ng-controller="myCtrl">       //输出结果
    {{first}}<br>                 //ctrl局部first
    {{$root.first}}<br>           //全局first
    {{second}}<br>                //全局second
    {{$root.second}}<br>          //全局second
</div>
<br>
<br>
<div ng-controller="myCtrl2">
    {{first}}<br>                //全局first
    {{$root.first}}<br>          //全局first
    {{second}}<br>              //ctrl2局部second 
    {{$root.second}}            //全局second
</div>
<script>    
var app = angular.module('myApp', []);    
app.controller('myCtrl', function ($scope,$rootScope) {
        $scope.first = 'ctrl局部first';
        $rootScope.first = '全局first';
    });    
app.controller('myCtrl2', function ($scope,$rootScope) {
        $scope.second = 'ctrl2局部second';
        $rootScope.second = '全局second';    
});
</script>

尝试一下 »

718AngularJS 控制器

model 中可以有多个 controller，第一个例子可以改成这样:

<div ng-app="myApp">
    <div ng-controller="myCtrl1">
        名:  <input type="text" ng-model="firstName"><br>
        姓:  <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
    </div>
    <br><br>
    <div ng-controller="myCtrl2">
        名:  <input type="text" ng-model="firstName"><br>
        姓:  <input type="text" ng-model="lastName"><br>
        <br>
        姓名: {{firstName + " " + lastName}}
    </div>
</div>

尝试一下 »

717AngularJS Scope(作用域)

@breaty，ng 同样是使用双向数据绑定的原理，当数据发生变化的时候就会进行一定更新，ng-replace 和 vue 中 v-for 一样，在遍历循环的时候都是需要进行一个 key 值唯一值，不然其无法辨别这个数组中每条数据的唯一性

716AngularJS Scope(作用域)

<div ng-controller="myContrl">    
  <h1>{{lastname}}家族成员：</h1>    
  <ul>        
    <li ng-repeat="x in names track by $index">
      {{x}}.{{lastname}} 
      <button ng-click="delPerson($index)">删除</button> 
    </li>   
  </ul>    
  <p>添加成员：
    <input type="text" ng-model="name" placeholder="请输入需要添加的成员名字"></p>
  <button ng-click="addPerson(name)">确认添加</button>
</div>

尝试一下 »

上面是代码，直接从webstrom里面复制过来的，运行正常；

我在使用 ng-repeat 循环的基础上利用我会的有限的知识扩展了一下功能，加了两个方法，一个是 addPerson(),添加新的成员，一个是 delPerson(),删除现有成员；都是利用 $scope 实现的，angular会自动监控，一旦存放循环对象的数组 names 里面的数组对象出现变动，都会实时更新并反映到页面的显示上。所以我的添加和删除功能也是根据这个特性实现的。我最主要想要反映的是 ng-repeat  的循环对象是不能出现重复项的，所以如果有重复的就会报错，应该是 key value的问题吧，不是很了解内部运行机制；经过查询发现 在 循环后面加上  track by $index 就会解决问题，也就可以有重复对象了