AngularJS在ng-click事件中改变作用域变量

Question

AngularJS在ng-click事件中改变作用域变量

3

我尝试在模板中的ng-click上设置一个作用域变量，然后在控制器中读取它。例如：

HTML：

<section id="editCtrl" data-ng-controller="EditCtrl as edit">
    {{ edit.myVar = []; "" }}
    Click the following buttons:<br>
    <span data-ng-click="edit.myVar['entry'] = 'test'">Click me</span>
    <span data-ng-click="edit.showMyVar();">Show MyVar in console</span>
</section>

JS：

// This controller is just for the example - I would never add a controller variable within the template
var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.showMyVar = function(){
        console.log(edit.myVar);
    };
});

然而，变量“edit.myVar”始终是一个空数组。我做错了什么？在我的理解中，这是一个有效的ng-click表达式。

实时示例：JSFiddle

- dude

3个回答

1

首先在控制器中初始化edit.myVar = {'entry' : ''};，如下所示

var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.myVar = {'entry' : ''};; // initailize the array here
    edit.showMyVar = function(){
        console.log(edit.myVar);
    };
});
angular.bootstrap(document, ['app']);

注意：

首先点击“click me” span，将值设置到数组中，然后点击下一个span以在控制台上查看。您的控制台仅在单击edit.showMyVar();函数时起作用。 Fiddle

- Sudharsan S

这在Firefox中不起作用，因为它应该是一个对象而不是一个数组。 - dude

@julmot - 我更新了我的答案，它将在所有浏览器上运行。 - Sudharsan S

-1

试试这个

<section id="editCtrl" ng-init="edit.myVar = [];" data-ng-controller="EditCtrl as edit">
Click the following buttons:<br>
<span data-ng-click="edit.myVar['entry'] = 'test'">Click me</span>
<span data-ng-click="edit.showMyVar();">Show MyVar in console</span>

更新：我认为您的对象一遍又一遍地被初始化了。我使用了ng-init方法，这样它只会初始化一次对象。

- Mansi Parekh

这不会改变任何事情。另外，您应该解释为什么这可以解决问题。 - dude

我已经编辑了我的评论。希望你已经尝试过这个解决方案。 - Mansi Parekh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ngLover · Accepted Answer

您需要进行一些更改--

您不能在{{ }}中保留分配代码，因为该代码经常呈现。因此，您将无法获得实际值。

工作的plunker..

    <!DOCTYPE html>
<html >

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
    <style>span:nth-of-type(1){background:yellow;}
      span:nth-of-type(2){background:red;}</style>
  </head>

  <body>
    <section id="editCtrl" ng-controller="EditCtrl as edit">
    Click the following buttons:<br>
    <button ng-click="edit.myVar['entry']='test'">Click me</button>
    <button ng-click="edit.showMyVar()">Show MyVar in console</button>
      </section>
      <script>angular.bootstrap(document, ['app'])</script>
  </body>

</html>

Js文件

 // This controller is just for the example - I would never add a controller variable within the template
var app = angular.module("app", []);
app.controller("EditCtrl", function(){
    var edit = this;
    edit.showMyVar = function(){
        alert(JSON.stringify(edit.myVar));
    };
});

您的代码存在以下问题：

您不能将赋值代码放在{{ }}中，因为这段代码会经常渲染，所以您将无法得到实际值。
在加载文档应用程序之前，我的另一个问题是引导。