JavaScript Angular 1.5.x Controller

Angular 1.5を学ぶとき、タグの使い方について本当に混乱しました。JavaScript Angular 1.5.x Controller

つまり、コントローラ内に変数を格納するために「グローバル」オブジェクトが必要な理由を理解できません。

JSビン：http://jsbin.com/puyayocomi/11/edit?html,js,output

質問はです：私たちは代わりに（「名前空間」と呼ばれるこの場合は）グローバルオブジェクトを使用しての直接コントローラ内で作成された変数を呼び出すことはできませんなぜはすべて保持しますコントローラ変数？

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

は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 } 
    ]; 
    */ 
})

出典

2016-11-06 Ricardo Agra

$ scope変数を関数コントローラに渡すと、htmlが変数を検索する名前空間が得られます。

JS Bin Here

HTML

<div ng-controller="todoCtrl"> 
     <ul class="unstyled"> 
      <li ng-repeat="todo in todos"> 
       <label class="checkbox"> 
        <input type="checkbox" ng-model="todo.done"> 
        <span class="done-{{todo.done}}">{{todo.text}}</span> 
       </label> 
      </li> 
     </ul> 
    </div>

はJavaScript：

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

出典

2016-11-07 21:11:35

'$ scope.todos'と' this.todos'は同等です - john papaの角形ガイドは 'this'を優先します - https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#を参照してくださいスタイル-y031 –

それは基本的に機能スコープはJavaScriptでどのように機能するかに尽きる：

function Controller() { 
 
    // local variable 
 
    var foo = 1; 
 

 
    // instance property 
 
    this.bar = 2; 
 
} 
 

 
// imagine Angular creates an instance of your controller like this: 
 
var instance = new Controller(); 
 
console.log('foo', instance.foo) // undefined 
 
console.log('bar', instance.bar) // 2

したがって、ローカル変数は関数の外部からはアクセスできませんが、プロパティにはthisにバインドできます。

出典

2016-11-06 16:03:56

完璧な理にかなって、ありがとう！ –

あなたは大歓迎です！私はそれもまたこのように意味があると思います。なぜなら、ビューの中で実際に何を望んでいるのか、一時的な変数なのかをより明確に表現するからです。 –

ああ、スタックオーバーフローへようこそ！あなたの質問に答えた場合は、チェックマークアイコンをクリックして受け入れたものとしてマークしてください;） –

JavaScript Angular 1.5.x Controller

答えて

関連する問題