ng-show не работает с $ scope

0

Я новичок в угловой и не могу понять, почему ng-show в приведенном ниже коде не работает. IsLoggedIn - переменная в $ scope.

<html ng-app"XYZ"
<body>
    <nav id="myNav" ng-show = "isLoggedIn" ng-controller="NavBarController as navCtrl">
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse">
                <i class="material-icons">menu</i>
            </a>
            <ul class="side-nav" id="mobile-demo">
                <li>
                    <a href="sass.html">Sass</a>
                </li>
                <li>
                    <a href="badges.html">Components</a>
                </li>
                <li>
                    <a href="collapsible.html">Javascript</a>
                </li>
                <li>
                    <a href="mobile.html">Mobile</a>
                </li>
            </ul>
        </div>
    </nav>
    <div ng-view>

    </div>...</body></html>

Другой шаблон:

 <button class = "btn" ng-click = "loginCtrl.doLogin()">LOGIN</button>

Вход в систему:

angular.module('XYZ')
.controller('LoginController', ['NetworkService',
    '$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function(NetworkService, $routeParams, $location,$scope,$timeout) {
        var self = this;
        $scope.isLoggedIn = false;
        // $scope.$apply();
        self.doLogin = function(){
            $scope.isLoggedIn = true;
        }
    }
]);

Я попробовал вызывать $ scope. $ Apply() после того, как я изменил переменную isLoggedIn, которая приводит к тому, что исключение "$ apply уже выполняется". Я также попытался инкапсулировать внутренний код doLogin в $ timeout(), который также потерпел неудачу.

РЕДАКТИРОВАТЬ:

конфигурации:

angular.module('XYZ')
.config(function($routeProvider) {
    console.log("Configuring routes");
    $routeProvider.when('/login', {
            templateUrl: "./templates/login.html",
            controller: "LoginController",
            controllerAs: "loginCtrl"
        })
    });
  • 0
    Добро пожаловать в переполнение стека! Пожалуйста, не ставьте решение в вопросе. Вопросы для вопросов, ответы для ответов. Если вы хотите поблагодарить @Jorrex, примите его ответ (рядом с его ответом должна быть галочка) и, возможно, также проголосуйте против него (через стрелку вверх рядом с номером). Смотрите, что мне делать, когда кто-то отвечает на мой вопрос?
Теги:

4 ответа

1
Лучший ответ

Проблема, с которой вы сталкиваетесь, заключается в том, что вы создаете новый модуль, но для этого требуется второй аргумент (зависимости).

Поскольку вы не предоставляете никаких зависимостей, вам действительно необходимо передать пустой массив [] в качестве второго параметра. И, видя, что вы используете $ routeProvider в своем .config() вам нужно включить либо зависимость, предоставляемую функцией AngularJS, либо другую зависимость "маршрутизации" (например, ui-router)

Таким образом, ваш код должен выглядеть следующим образом:

конфиг

angular.module('XYZ', ['ngRoute'])
.config(function($routeProvider) {
    console.log("Configuring routes");
    $routeProvider.when('/login', {
            templateUrl: "./templates/login.html",
            controller: "LoginController",
            controllerAs: "loginCtrl"
        })
    });

LoginController

angular.module('XYZ', ['ngRoute'])
.controller('LoginController', ['NetworkService',
    '$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function(NetworkService, $routeParams, $location,$scope,$timeout) {
        var self = this;
        $scope.isLoggedIn = false;
        // $scope.$apply();
        self.doLogin = function(){
            $scope.isLoggedIn = true;
        }
    }
]);

это также плохая практика, чтобы каждый раз восстанавливать ваш модуль, поэтому назначьте его переменной (var myApp = angular.module('XYZ', ['ngRoute']);) и используйте эту переменную для создания экземпляров контроллеров, служб, заводов, и т.п.

Здесь скрипку, чтобы показать функциональность (вкл. В URL для угловых route.js, которые вам нужно будет, если вы используете маршрутизацию). Это не точная копия вашего кода, потому что JSFiddle не слишком хорошо обрабатывает маршрутизацию.

Поделиться
  • 0
    Инициализация была в другом файле. Я не упомянул об этом, так как думал, что это не проблема. Пожалуйста, проверьте мой проект на github github.com/yashwanthreddyg/Angular-sample-1
  • 0
    Я посмотрел на ваш код и понял, с какой проблемой вы столкнулись. Я отредактировал ваш код, и вы можете скачать его здесь, так как у меня нет учетной записи на github: dropbox.com/s/qakhat1hki19qat/Angular-sample.zip?dl=0
Показать ещё 2 комментария
0

Я решил это. Проблема заключалась в том, что элемент, который я хотел скрыть (или показать), был вне области LoginController. Поскольку $ scope.isLoggedIn изменяется в области контроллера, $ scope не знает HTML, который он должен изменить, который не находится в той же области. Помещение 'isLoggedIn' в $ rootScope работает. Благодаря @Jorrex за помощь и предоставление мне решения и всех, кто пытался мне помочь.

//solution
app.controller('LoginController', ['NetworkService', '$routeParams',
'$location',
'$scope',
'$timeout',
'$rootScope',
function(NetworkService, $routeParams, $location,$scope,$timeout,$rootScope) {

        $scope.doLogin = function(){
            $rootScope.isLoggedIn = true;
        }
    }
]);
Поделиться
0 
angular.module('XYZ')
.controller('LoginController', ['$routeParams',
    '$location',
    '$scope',
    '$timeout',
    function($scope) {

    $scope.isLoggedIn = false;

    $scope.doLogin = function(){
        $scope.isLoggedIn = true;
    };
}
]);

Вам не нужно создавать службу, просто устанавливая для $ scope объекта значение true или false, вы можете обрабатывать ее с помощью самого контроллера. И в HTML, сделайте следующее изменение для ng-click

 <button class = "btn" ng-click = "doLogin()">LOGIN</button>

Это должно сработать.

Поделиться
  • 0
    Спасибо Вини Сан за ваш ответ. Я попробовал это, но это не сработало. Сам по себе doLogin () не вызывает. Я положил код на github github.com/yashwanthreddyg/Angular-sample-1
  • 0
    О, я пропустил передачу $ scope в качестве параметра функции. Я отредактировал мой код выше. Проверь сейчас
Показать ещё 2 комментария
0

ваш контроллер называется LoginController, поэтому ng-controller = LoginController, контроллер также должен вызываться в родительском теге для любых других директив... см. ниже.

<body ng-controller="LoginController">
<nav id="myNav" ng-show = "isLoggedIn" >
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse">
            <i class="material-icons">menu</i>
        </a>
        <ul class="side-nav" id="mobile-demo">
            <li>
                <a href="sass.html">Sass</a>
            </li>
            <li>
                <a href="badges.html">Components</a>
            </li>
            <li>
                <a href="collapsible.html">Javascript</a>
            </li>
            <li>
                <a href="mobile.html">Mobile</a>
            </li>
        </ul>
    </div>
</nav>
<div ng-view>

</div>...</body></html>
Поделиться
  • 0
    если он не определил это в своей маршрутизации, где в качестве `ng-controller 'больше не нужен. Но я думаю, что это ответ, который ищет ОП :)
  • 0
    Я определил это в конфиге как псевдоним. Извините, что не упомянул это.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню