JavaScript Angular 1.5.x控制器_Javascript_Angularjs_Controller

JavaScript Angular 1.5.x控制器

javascript angularjs

JavaScript Angular 1.5.x控制器,javascript,angularjs,controller,Javascript,Angularjs,Controller,在学习Angular 1.5时，我对标签的用法感到非常困惑也就是说，我不明白为什么需要一个“全局”对象来包含控制器中的变量 JS Bin：问题是：为什么我们不能直接调用控制器中创建的变量，而不是使用全局对象（在本例中称为“名称空间”）来保存所有控制器变量 index.html： <!DOCTYPE html> <html ng-app="todoApp"> <head> <script src="https://ajax.go

在学习Angular 1.5时，我对标签的用法感到非常困惑

也就是说，我不明白为什么需要一个“全局”对象来包含控制器中的变量

JS Bin：

问题是：为什么我们不能直接调用控制器中创建的变量，而不是使用全局对象（在本例中称为“名称空间”）来保存所有控制器变量

index.html：

<!DOCTYPE html>
<html ng-app="todoApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    </head>
    <body>
        <h2> Angular Controllers </h2>

        <!-- Why not : ng-controller="todoCtrl" -->
        <div ng-controller="todoCtrl as namespace">
        <!--                                    -->    
            <ul class="unstyled">
                <!-- Why not : ng-repeat="todo in todos" -->
                <li ng-repeat="todo in namespace.todos">
                <!--                                     -->
                    <label class="checkbox">
                        <input type="checkbox" ng-model="todo.done">
                        <span class="done-{{todo.done}}">{{todo.text}}. </span>
                    </label>
                </li>
            </ul>
        </div>
    </body>
</html>


角度控制器


{{todo.text}}。

JavaScript:

console.log( 'Hello Script!' );

angular.module( 'todoApp',[] ).controller( 'todoCtrl',function()
{
    var namespace = this;

    namespace.todos =
    [
    { text:'one', done:true },
    { text:'two', done:false }
    ];

    /* 
    <!-- Why not : -->

    var todos =
    [
    { text:'one', done:true },
    { text:'two', done:false }
    ];
    */
})

angular.module( 'todoApp',[] ).controller( 'todoCtrl',function( $scope )
{    
    $scope.todos =
    [
      { text:'one', done:true },
      { text:'two', done:false }
    ];
})

console.log（'Hello Script！'）；
角度.module（'todoApp'，[]）.controller（'todooctrl'，function（）
{
var namespace=this；
namespace.todos=
[
{text:'one'，done:true}，
{文本：'two'，完成：false}
];
/* 
var todos=
[
{text:'one'，done:true}，
{文本：'two'，完成：false}
];
*/
})

基本上可以归结为函数作用域在JavaScript中的工作方式：

功能控制器（）{
//局部变量
var-foo=1；
//实例属性
这1.bar=2；
}
//假设Angular创建了控制器的一个实例，如下所示：
var实例=新控制器（）；
console.log（'foo'，instance.foo）//未定义
console.log（'bar'，instance.bar）//2

我找到了一种更好的方法，将$scope变量传递给函数控制器，它将为您提供一个名称空间，html在其中查找变量

HTML

不客气！我想这也是有道理的，因为像这样，你更清楚地知道你在视图中真正想要什么，而不是什么只是一个临时变量。哦，欢迎来到堆栈溢出！如果我回答了您的问题，请单击复选标记图标将其标记为已接受；）

$scope.todo

和

this.todo

是等效的-john papa的angular styleguide支持

this

-请参阅

angular.module( 'todoApp',[] ).controller( 'todoCtrl',function( $scope )
{    
    $scope.todos =
    [
      { text:'one', done:true },
      { text:'two', done:false }
    ];
})