Question

我对AngularJS很新。

我在控制器中创建了一个子范围，如下所示。但模型不可用/绑定未在html视图中发生。

我不确定如何在HTML视图中指定模型名称

var App= angular.module('App', []);
App.controller('myController', function ($scope,$rootScope, $http) {
    var model = $scope.$new();
    model.id = "1";
    model.modelName = "New Model";
    model.cityCode= 1212;
    model.country= "USA";
});

HTML：

 <div  ng-app="App">
    <div ng-controller="myController">
         <label>{{modelName}}<label/>
         <input type="text" ng-model="modelName" />
    </div>
 </div>

Answer 1

这是因为你绑定了错误的对象。在控制器中，您已拥有$scope。它引用了您可以在视图中使用的变量。您无需在其中创建子范围。

而不是..neW(); model.id=..使用$scope.id=...;

经验法则：ngModel=mymodel.field中应该有一个点。这不是你的问题的原因，但它会省去你的麻烦。否则原型链将不会像大多数人认为的那样工作。见http://www.youtube.com/watch?v=ZhfUv0spHCY&t=29m19s

我在这里设置http://jsfiddle.net/5qu54/

如果您坚持使用新范围，则必须重新编译控制器的元素。 $compile服务将html元素绑定到您告诉它的范围。在此处查看http://jsfiddle.net/5qu54/1/

app.controller('myController', function ($element, $scope,$rootScope, $compile) {
    var model = $scope.$new();
    model.id = "1";
    $scope.modelName = "New Model";
    model.cityCode= 1212;
    model.country= "USA";

    console.log("my element is", $element.html()); 
    $compile($element.contents())(model);
});

在html中，我添加了国家/地区以查看绑定<label>{{modelName}} {{ country }}<label/> 尝试评论/取消注释$compile(...行

更新：关于$rootScope和$scope：范围可以是：共享，原型继承（可以是rootScope中的新增内容）或隔离的。有时你必须创建一个。例如，您创建了一个重复元素的指令，因为您不喜欢默认的ng-repeat。每个元素都需要一个孤立的范围或者您在$ rootScope.myModel中有一个模型，并且您需要一个新的“干净”范围，可以访问$ rootScope中已有的所有内容：$ rootScope.new（）;. 你应该仔细阅读http://docs.angularjs.org/guide/scope。但是，在您的情况下，您无需创建另一个范围。在您控制的控制器中，决定向UI公开的内容，就像您通常使用MVC架构一样。创建范围通常用于指令的link函数。

关于$compile：有时你会向“可以”指令的dom添加元素。例如，在directives.js中有一个指令myDir，你动态地将<my-dir>aloha</my-dir>添加到DOM（例如，另一个指令的链接函数在某处附加html）。现在你有了一个可以触发指令的元素，但angular仍然不知道它在那里。你编译元素，angular现在知道它并运行代码。

如何在视图中显示子作用域的属性 - 使用$ scope。$ new（）语法创建？

1 个答案: