Question

我开始在我的新网站上使用angularjs，所以我是初学者。我遇到了一个问题，在调用视图后，我无法在控制器中更改$ scope范围内的值。我使用ui-router来访问多个视图。我在这个例子中解释：

<html lang="pt" ng-app="myApp">{...}
<header ng-controller="siteHeader"><div ng-show="mySlogan"></div></header><div ui-view="content"></div>

在我的js中：

var app = angular.module('myApp', ['ui.router']); app.config(['$locationProvider','$stateProvider','$urlRouterProvider'
,function($locationProvider,$stateProvider,$urlRouterProvider) {

$urlRouterProvider.otherwise("/");

$stateProvider
    .state('home',{
        url: '/',
        views: {
            'content':{
                templateUrl: 'templates/main.html',
                controller: 'siteHeader'
            }
        }
    })
    .state('login',{
        url: '/login',
        views: {
            'content':{
                templateUrl: 'templates/login.html',
                controller: 'siteHeader'
            }
        }
    });}]);

app.controller('siteHeader',['$scope','$location',function($scope, $location){

if($location.path()=="/")
    $scope.mySlogan = true;
else
    $scope.mySlogan = false;}]);

当页面加载时，控制器第一次工作，但是当路径被更改时，我的$ scope.mySlogan什么都不做。

我做错了什么？

Answer 1

使用$state服务代替$location并获取以下网址：

$state.url

然后，尝试为每条路线创建一个专用控制器。这样可以避免使用广泛的条件来匹配特定路径的模板要求。

Answer 2

代码仅在分配给<header>的控制器中执行一次。分配给您的视图的控制器只是siteHeader控制器的其他实例，并在自己的范围内定义新的mySlogan变量。因此，更改值不会影响标题范围中的值。

要解决您的问题，您可以查看位置路径：

$scope.$watch(
  function() {
    return $location.path();
  }, function (newValue) {
    if (newValue === '/')
      $scope.mySlogan = true;
    else
      $scope.mySlogan = false;
  });

或者更好的方法是收听ui-router事件：

app.controller('siteHeader',['$scope',
  function($scope){

    $scope.$on('$stateChangeSuccess',
      function(event, toState) {
        if ( toState.includes('home') )
          $scope.mySlogan = true;
        else
          $scope.mySlogan = false;
      });

  }]);

您只需将控制器分配给sideHeader，而不是实际视图。

ui-router在调用视图后无法从$ scope更改值

2 个答案: