Question

我正在使用角度，因为现在我有一个小周，我遇到了一个奇怪的行为（我不知道为什么我之前没有看到它，因为它看起来像一个非常基本的错误）。

我有一个控制器让我们说HomeController定义了两个范围函数：foo（）和bar（）以及一个对象“var myVar = 5”，我想在foo（）中更改myVar的值并写出它的内容在酒吧（）。

问题是，看起来foo（）不会修改myVar。我还不是很清楚角度范围以及它们如何交互，但我认为foo（）中的$ scope是一个不同的范围，是实际控制器范围的副本。所以修改它不会修改控制器。

但我怎么能实现这个目标呢？

修改：添加所有使用的代码

编辑2：添加plunker：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：

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

app.config(function($routeProvider) {

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

});

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：

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

由于

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

您的可点击链接包含重新加载页面状态的href="#"并重置您的范围变量，这就是bar（）始终看到值= 5的原因。删除它们应该可以解决您的问题。

Answer 2

$scope.myVar只会在首次调用$scope.foo()方法时更新。

检查下面的代码，它应显示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();
}])

Answer 3

坦克为这些快速回答。

事实上，我没有从我的控制器调用这些功能。

我有一个视图文件，我在第一个

中定义了两个按钮

打电话给foo 呼叫栏

当然，我点击＆＃34;打电话给foo＆＃34;首先是btn，然后是＃34;呼叫栏＆＃34;

Answer 4

我放置了两个按钮，每个按钮触发它们的功能：

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

看看这个plunker - 在“foo”之后点击“bar”时显示10个

范围函数

4 个答案: