AngularJS change scope variable on ng-click

Я пытаюсь установить переменную области видимости в шаблоне на ng-click, а затем прочитать ее в контроллере. Пример:AngularJS change scope variable on 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

источник

2015-07-24 dude

Есть несколько изменений, которые вы должны сделать -

Вы не можете держать код назначения в {{ }}, так как этот код часто показывает . поэтому вы не получите фактическое значение.

Working 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="[email protected]" 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)); 
    }; 
});

Проблемы с кодом:

Вы не можете держать Асси код в {{ }}, так как этот код часто отображается. поэтому вы не получите фактическое значение.
еще одна проблема на моем конце перед загрузкой документа приложение было bootstraping.

источник

2015-07-24 11:48:03 ngLover

кажется, что ваша ссылка на скрипку некорректна – dude

Нужно ли использовать скобки в 'ng-click'? – dude

скрипка не может быть разветвлена, вы можете проверить фрагмент добавлен @julmot – ngLover

-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, поэтому он будет инициализировать объект только один раз.

источник

2015-07-24 11:37:45

Это ничего не меняет.Также вы должны объяснить, почему это решило проблему, – dude

Я отредактировал свой комментарий. Надеюсь, вы пробовали это решение. –

Как я уже говорил, это не работает. – dude

Initialize 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']);

Примечание:

первый клик на «жми меня» продолжительность и значение устанавливается в массив и нажмите на следующий промежуток для ваша консоль. ваша консоль только работает на нажатия edit.showMyVar(); функции

Fiddle