Встановіть змінну кутової області в розмітці


94

Просте запитання: Як я можу встановити значення обсягу в html для читання моїм контролером?

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

app.controller('MyController', function($scope) {
  console.log($scope.myVar);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
  <div ng-controller="MyController" app-myVar="test">
    {{myVar}}
  </div>
</div>

JSFiddle: http://jsfiddle.net/ncapito/YdQcX/


Можливо, вам краще створити директиву для цього. Директива повинна інкапсулювати: параметри, контролер, специфічний для цієї директиви, і шаблон для розмітки 'myMap'.
Ян Мерсер

Це власне те, що я зробив ... просто маю деякі проблеми з доступом до $ scope.myVar у контролері директив. Чому я повинен використовувати годинник у контролері для доступу до змінних області?
Nix

1
Може, ви могли б опублікувати свою директиву? Погляньте на "Розуміння включення та сфери застосування" тут docs.angularjs.org/guide/directive Вам, напевно, потрібен обсяг: {myVar: '='}, і ви сказали б, my-var="foo"коли зателефонуєте. Зверніть увагу на використання дефісу проти camelCase. Примітка: fooтут обчислюється , якщо ви не хочете, щоб у визначенні області використовувалось '@' для доступу до значення атрибута.
Ian Mercer

1
@Nix Чи можете ви пояснити, чому значення потрібно ініціалізувати у поданні, а не у вашому контролері? Я припускаю, ви вже знаєте, що це не звичайний спосіб ініціалізації значень (інакше ви б не запитували), і інші зможуть дати вам кращі відповіді, якщо вони краще зрозуміють ваш варіант використання.
Шон Бін

1
@SeantheBean я був молодим і дурним ...;) я не маю уявлення, чому мені це потрібно було зробити. Я, мабуть, намагався щось зламати.
Nix

Відповіді:


138

ng-initне працює, коли ви призначаєте змінні всередині циклу. Використовуйте {{myVariable=whatever;""}}

Кінцевий результат ""зупиняє вираження Angular для будь-якого тексту.

Тоді ви можете просто зателефонувати, {{myVariable}}щоб вивести значення змінної.

Я знайшов це дуже корисним при ітерації декількох вкладених масивів, і я хотів зберегти поточну інформацію про ітерації в одній змінній, а не запитувати її кілька разів.


1
Хоча це працює, здається хакі. Тобто, як правило, хорошу практику використовувати {{}}лише для виведення однієї змінної, а не для призначення змінних. Я б сказав, що stackoverflow.com/a/16799763/814160 є більш правильним (менше JS-коду у поданні).
Шон Бін

1
+1 для @SeantheBean - я перевірив це. Здається, є проблеми з дочірніми контролерами та сферою призначення змінної у розмітці. Директива працює для моїх цілей і видається надійним рішенням.
Пол Карлтон,

2
Здається, це не працює в angular2 / 4 - Прив'язки не можуть містити призначення
Demodave

1
@Demodave, замість цього слід встановити всі змінні контролера в коді Typescript і використовувати шаблон лише для підключення Typescript до HTML. Шаблон не повинен призначати змінні.
boxmein

80

ngInit може допомогти ініціалізувати змінні.

<div ng-app='app'>
    <div ng-controller="MyController" ng-init="myVar='test'">
        {{myVar}}
    </div>
</div>

Приклад jsfiddle


3
Слід зазначити, що вони не рекомендують це рішення для реальних додатків (але насправді не пропонують альтернативу): docs.angularjs.org/guide/dev_guide.mvc.understanding_model
Mike Robinson

Це спрацювало для мене, однак спочатку змінна все ще не була визначена в контролері. Я зробив невеликий інтервальний цикл: var interval = setInterval (function () {if ($ scope.whatever) {// dostuff clearInterval (interval);}}, 10);
roelleor

19

Створіть директиву, що викликається за myVarдопомогою

scope : { myVar: '@' }

і назвіть це так:

<div name="my_map" my-var="Richmond,VA">

Зверніть увагу, зокрема, на посилання на випадок верблюда в директиві на назву дефіса

Для отримання додаткової інформації див. "Розуміння включення та сфери застосування" тут: - http://docs.angularjs.org/guide/directive

Ось скрипка, яка показує, як можна копіювати значення з атрибутів у змінні області різними способами в межах директиви.


Я хочу мати можливість робити кілька var-nick='my' var-nick2='test'. Якщо ви не можете придумати спосіб реалізувати його за допомогою директив, які я просто буду використовуватиng-init
Nix

Ви можете включити декілька атрибутів у область дії, все, що вам потрібно, це щоб один з них був назвою директиви, яку ви хочете виконати (або включити це ім’я директиви теж у html). scope: {varNick: '@', varNick2: '@'}
Ian Mercer

Але це не масштабовано? Мені потрібно було б визначити директиву для кожної змінної?
Nix

Ні, вам не потрібна директива щодо змінної. Погляньте на скрипку, яку я додав до відповіді.
Ian Mercer

Вибачте, я пропустив читання, ваш приклад ідеальний, моєю єдиною зміною був обсяг {'@': '@ "}.
Nix

10

Ви можете встановити значення з html таким чином. Я не думаю, що прямого рішення з кутового ще немає.

 <div style="visibility: hidden;">{{activeTitle='home'}}</div>

7
Хороший хак ... <div style="display: none">проте рекомендую .
Роджер

3

Ви можете використовувати, ng-initяк показано нижче

<div class="TotalForm">
  <label>B/W Print Total</label>
  <div ng-init="{{BWCount=(oMachineAccounts|sumByKey:'BWCOUNT')}}">{{BWCount}}</div>
</div>
<div class="TotalForm">
  <label>Color Print Total</label>
  <div ng-init="{{ColorCount=(oMachineAccounts|sumByKey:'COLORCOUNT')}}">{{ColorCount}}</div>
</div>

а потім використовуйте змінну локальної області в інших розділах:

<div>Total: BW: {{BWCount}}</div>
<div>Total: COLOR: {{ColorCount}}</div>

Мені подобається такий підхід; здається менш хакі. Хоча одне уточнення, ng-init не потребує фігурних дужок.
mklbtz

1
$scope.$watch('myVar', function (newValue, oldValue) {
        if (typeof (newValue) !== 'undefined') {
            $scope.someothervar= newValue;
//or get some data
            getData();
        }


    }, true);

Змінна ініціалізується після контролера, тому вам потрібно стежити за ним, а коли він не ініціалізується, використовуйте його.


0

Мені подобається відповідь, але я думаю, було б краще, щоб ви створили глобальну функцію області, яка дозволить вам встановити необхідну змінну області.

Тож у globalController create

$scope.setScopeVariable = function(variable, value){
    $scope[variable] = value;
}

а потім у своєму файлі html назвіть це

{{setScopeVariable('myVar', 'whatever')}}

Потім це дозволить вам використовувати $ scope.myVar у відповідному контролері


0

Якщо ви не в циклі, ви можете використовувати ng-init ще, що ви можете використовувати

{{var=foo;""}}

"" не дозволяє відображати вашу змінну

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.