Я участвую в разработке пользовательского интерфейса системы входа в угловое приложение и хотел бы, чтобы меню регистрации и входа появлялись в зависимости от нажатия кнопки. Я мог бы сделать это в контроллере с помощью метода .on, но, видимо, это плохая практика с точки зрения правильного использования angular.

Мой код выглядит следующим образом (вырезать ненужные биты):

<section ng-model="login" ng-init="login=true">
    <section ng-if="login">
        LOGIN CONTENT
        <button ng-click="login = !login">Sign up for an account</button>
    </section>
    <section ng-if="!login">
        SIGN UP CONTENT
    </section>
</section>

Я понятия не имею, что я делаю неправильно, или, если это даже правильный угловой способ сделать это.

2
Mox 13 Дек 2016 в 17:48

3 ответа

Лучший ответ
  1. Не помещайте ng-model в свой первый тег раздела.

  2. Объявить $scope.params = {}; в вашем контроллере, а затем установите его параметр login в true:


Проверьте эту демонстрацию Fiddle .

<section ng-init="params.login = true">
  <section ng-if="params.login">
    <button ng-click="params.login = !params.login">Sign up for an account</button>
    LOGIN CONTENT
  </section>
  <section ng-if="!params.login">
    SIGN UP CONTENT
  </section>
  login is: {{params.login}}
</section>
1
Mistalis 13 Дек 2016 в 15:01

Как упоминалось выше, поскольку директива ngIf создает изолированную область, вам нужна точка в вашей модели, в противном случае изменения, внесенные в значение примитива, не будут «распространяться» обратно в контроллер.

Так что создайте объект, а не примитив в контроллере, т.е.

$scope.someModel = { login: true};

И ссылаться на это в HTML как "someModel.login". Таким образом, вы также можете избавиться от ngInit, поскольку он не обязательно является хорошим вариантом использования.

2
Zyga 13 Дек 2016 в 15:04

Создайте объект с полем входа в систему. Используйте его при входе в систему, чтобы модель обновлялась.

< Сильный > DEMO

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

app.controller("dobController", ["$scope",
  function($scope) {
    $scope.user ={};
   
  }
]);
<!DOCTYPE html>
<html ng-app="todoApp">

<head>
  <title>To Do List</title>
  <link href="skeleton.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
  <script src="MainViewController.js"></script>
</head>


<body ng-controller="dobController">
  
  <section ng-model="user.login" ng-init="user.login=true">
    <section ng-if="user.login">
      LOGIN CONTENT
      <button ng-click="user.login = !user.login">Sign up for an account</button>
    </section>
    <section ng-if="!user.login">
      SIGN UP CONTENT
    </section>
  </section>
</body>

</html>
2
Sajeetharan 13 Дек 2016 в 14:52