2017-06-12 17 views
0

私は1週間前から角度を使用していますが、私は奇妙な動作に遭遇しました(そして、それは以前のように見えませんでしたエラー)。スコープ関数内の角度修正スコープ属性

foo()とbar()とオブジェクト "var myVar = 5"という2つのスコープ関数を定義するHomeControllerを考えてみましょう。私はfoo()のmyVarの値を変更したいと思いますbar()内のコンテンツ

問題は、foo()がmyVarを変更しないようです。私は角度のスコープと、それらがどのように作用するかについてまだよく分かりませんが、私はfoo()の$ scopeが実際のコントローラスコープのコピーである別のスコープであると考えています。それを変更してもコントローラ1は変更されません。

しかし、これをどのように達成できますか?

編集:すべての使用コード

編集2を追加します。plunkerを追加します。

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

app.config(function($routeProvider) { 

    $routeProvider 
     .when('/', { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }) 

}); 
http://plnkr.co/edit/DGzw0UxjBeND3hQWK3o3

ここに私のIndex.htmlとは

<!-- index.html --> 
<!DOCTYPE html> 
<html> 
<head> 

    <!-- CSS --> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"> 


    <!-- JS --> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> 


    <!-- Loading angular App --> 
    <script src="app.js"></script> 

    <!-- Loading angular controllers --> 
    <script src="homeController.js"></script> 

</head> 


<body ng-app="TemplateApp"> 
    <div ng-view></div> 
</body> 
</html> 

app.jsです

home.html:

<div class="row"> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="foo()">call foo</a> 
    </div> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="bar()">call bar</a> 
    </div> 
</div> 

そして最後にhomeController.js:$scope.foo()メソッドが最初に呼び出されたとき

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) { 

    $scope.myVar = 5; 

    $scope.foo = function() { 
     $scope.myVar = 10; 

     console.log($scope.myVar); // display 10 
    }; 

    $scope.bar = function() { 
     console.log($scope.myVar); // display 5 Should be 10 
    }; 
}]) 

おかげ

+0

私が見ることができる限り - 現在のコードでは、 "bar"の前に "foo"をトリガーすると、計画どおりに実行する必要があります...私はあなたの問題がはるかに簡単であり、スコープの理解 – happyZZR1400

+0

正確に何をするかを理解するには、ビューのコードを共有する必要があります。 –

+0

私のコードとプランナーを追加しました –

答えて

1

後にクリックされた「バー」:

<div class="row"> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="foo()">call foo</a> 
    </div> 
    <div class="col s6"> 
     <a class="btn" href="#" ng-click="bar()">call bar</a> 
    </div> 
</div> 

あなたのクリック可能なリンクには、バー()は常に値を見て、なぜ= 5である、あなたのスコープ変数を、ページの状態をリロードしリセットhref="#"が含まれています。それらを削除すると問題が解決するはずです。

+0

私が言ったように、それは愚かでかなり基本的なエラーでした:)。それは仕事です、ありがとう! –

0

$scope.myVarは更新のみになります。チェックコードの下

、それは10表示されるはずです:これらの迅速な回答に

angular.module('TemplateApp').controller('homeController', [ '$scope', function($scope) { 

    $scope.myVar = 5; 

    $scope.foo = function() { 
     $scope.myVar = 10; 

     console.log($scope.myVar); // display 10 
    }; 

    $scope.bar = function() { 
     console.log($scope.myVar); // display 5 , I would like 10 there 
    }; 


    $scope.foo(); 
    $scope.bar(); 
}]) 
0

タンクを。

実際、私は自分のコントローラからこれらの機能を呼び出すわけではありません。

は、私は私は2つのボタン最初

コールfooの コールバー私は

最初BTN「コールFOO」にし、「コール・バー」をクリックもちろん

を定義するビューファイルを持っています

0

iがそれぞれの機能をトリガーする二つのボタン配置:このplunker

<button ng-click="foo()">foo</button> 
<button ng-click="bar()">bar</button> 

を - それは10場合を示していますあなたのplunkerから「foo」という

関連する問題