Question

所以我做了一些实验，在2个不同的选择框上创建了一个ng-change行为，同时改变了相同的$ scope。一个是在ng-include指令中，另一个在ng-include指令之外，有趣的部分是当我实现数据绑定时结果没问题，但是当我试着查看我的控制台选项卡时它返回不同< / p>

ng-include指令之外的那个是好的，而ng-include指令中的那个总是返回值＆＃39; a＆＃39;或静态值

这是 index.html 模型

  <select ng-model="list" ng-change="changeOutsideTemplate()">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>

  {{list}}

  <div ng-include="test"></div> //this scope caries test.html

这是 test.html 模型

<select ng-model="list" ng-change="changeInsideTemplate()">
  <option value="a">A</option>
  <option value="b">B</option>
</select>

{{list}}

这是控制器

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.test = "test.html";
  $scope.list = "a";

  $scope.changeInsideTemplate = function() {
    console.log($scope.list); //always returns 'a'
  }

  $scope.changeOutsideTemplate = function() {
    console.log($scope.list); //this is the correct way
  }

});

这是有效的example

为什么你认为这个问题的原因？有人在意吗？

Answer 1

ng-include指令创建一个新的子范围。这是DOC

当你的ng-include html中的模型为<select ng-model="list" ng-change="changeInsideTemplate()">然后angular会检查其子范围内的模型list时，angular会意识到没有model被调用{在list子范围内{1}}。然后angular将在子范围内创建一个名为ng-include的新子范围模型。

如果你喜欢

list

然后angular将检查父范围中的模型<select ng-model="$parent.list" ng-change="changeInsideTemplate()">。在list范围的父范围中包含我们关注的ng-include。

这是工作Plunker

或者您可以使用以下内容作为评论中建议的@dfsq。

控制器

$scope.list

的index.html

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.test = "test.html";
  $scope.list = {value: 'a'};

  $scope.changeInsideTemplate = function() {
    console.log($scope.list.value); //always returns 'a'
  }

  $scope.changeOutsideTemplate = function() {
    console.log($scope.list.value); //this is the correct way
  }
});

的test.html

<select ng-model="list.value" ng-change="changeOutsideTemplate()">

<select ng-model="list.value" ng-change="changeInsideTemplate()">

中的

将检查test.html，然后angular将知道list.value是对象的属性，并且在子范围内没有名为value的对象。然后angular会搜索父范围内的对象（list），就像搜索整个层次结构一样。

这是Plunker

如果list内有ng-include，那么第二个ng-include会先ng-include

创建子范围

然后在ng-include

test.html

并在<div ng-include="$parent.include"></div> // because `$scope.include` in parent scope

include.html

这是使用$ parent的Plunker。

这是使用Object的Plunker。

使用更合适的对象。

ng-include内部和外部的$ scope表现不同

1 个答案: