0

I am pretty new to AngularJS.

I have created a child scope in my controller as shown below. but the model is not available / binding is not happening in the html view.

i'm not sure how to specify the model name in HTML View

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>
4

1 回答 1

0

这是因为您绑定了错误的对象。在控制器中，您已经拥有$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指令的功能。

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

于 2013-09-20T10:39:40.880 回答