Question

我想访问UI视图之外的$ scope。我的app结构很简单。它是一个todo应用程序，有三个面板，如My todo app design

以下是完整代码https://github.com/udayghulaxe/ticitic_todo

我想要的是，我想访问第三个面板上的详细信息，我必须使用$ rootScope这是不正确的发送数据的方式，我已经为每三个面板分配了单独的控制器。我点击要做的更改UI路由器的状态。我只想访问第三个面板中的数据

<!-- Routers -->

.state('dashboard', {
  url: '/dashboard',
  abstract: true,
  views: {
    '': {
      templateUrl: './partials/main.html'
    },
    'header_toolbar@dashboard': {
      templateUrl: './views/header_toolbar.html'
    },
    'sidenavleft@dashboard': {
      templateUrl: './views/sidenav.html'
    },
 
    'todo_detail@dashboard': {
      templateUrl: './views/todo_detail.html'
    }

  }
})

.state('dashboard.listdetail', {
  url: '/lists/:list_id/',
  templateUrl: './partials/list.detail.html',
  controller: 'ListController',
  resolve: {
    list_id: function($stateParams) {
      return $stateParams.list_id;
    }
  },
  data: {
    authorizedRoles: [USER_ROLES.user],
    pageTitle: 'Lists'
  }
})

.state('dashboard.tododetail', {
  url: '/lists/:list_id/:todo_id',
  templateUrl: './partials/list.detail.html',
  controller: 'TodoDetailController',
  resolve: {
    list_id: function($stateParams) {
      console.log($stateParams);
      return $stateParams.list_id;
    },
    todo_id: function($stateParams) {
      console.log($stateParams);
      return $stateParams.todo_id;
    }
  }
})

<!-- ----------------Controllers  --------------------- ->  

app.controller("ListController", ['$rootScope', '$scope', '$state', '$q', 'UserService', '$window', 'AuthService', 'DataService', 'AUTH_EVENTS', 'list_id', '$mdSidenav',
  function($rootScope, $scope, $state, $q, UserService, $window, AuthService, DataService, AUTH_EVENTS, list_id, $mdSidenav) {
    $scope.value = 'this is value2';
    $rootScope.list_id = list_id.toString();
    $rootScope.todo_id = '';
    $scope.current_list = UserService.GetTodoBylistid($rootScope.lists, $scope.list_id);

    function toggleSidenav(menuId) {
      $mdSidenav(menuId).open();
    };

    $scope.Toggle_Todo_Detail = function(todo_id) {
      $state.go('dashboard.tododetail', {
        list_id: $scope.list_id,
        todo_id: todo_id
      }, {
        reload: false
      });

      toggleSidenav('right');
    };

  }
]);


app.controller("TodoDetailController", ['$rootScope', '$scope', '$state', '$q', 'UserService', '$window', 'AuthService', 'DataService', 'AUTH_EVENTS', 'list_id', '$mdSidenav', 'todo_id',
  function($rootScope, $scope, $state, $q, UserService, $window, AuthService, DataService, AUTH_EVENTS, list_id, $mdSidenav, todo_id) {

  }
]);

<!--  Main.html  -->

<div id="appContainer" md-theme="{{ dynamicTheme }}" ng-init="load()" md-theme-watch>
  <!-- Header Toolbar -->
  <div ui-view="header_toolbar"></div>

  <div layout="row" layout-xs="column" layout-sm="column">
    <!-- Sidenav right view -->
    <div ui-view="sidenavleft" id="nav_container"></div>

    <!-- Main middle container  -->
    <div flex="100" flex-gt-sm="55" layout="column" id="list_content">
      <md-content layout="column" flex class="md-padding">
        <div ui-view></div>
      </md-content>
    </div>

    <!-- Todo Detail View -->
    <div ui-view="todo_detail" id="todo_detail_view"></div>
  </div>
</div>

我不想通过$ rootScope传递数据，当我点击待办事项时，待办事项列表和详细信息都必须正常工作，现在当我点击进行中间模板时就消失了。

我正面临这个问题，因为我在UI视图外添加了“Todo Detail View”，我想访问“Todo Detail View”中的数据

Answer 1

由于变量名$scope已经提示，因此其目的是限定范围，因此无法从外部访问。提到的$ rootScope是一种在连接良好的孩子/父母之间进行交流的方式。

在不同控制器之间共享数据的“推荐”方式是IMO通常是角度服务，它注入所有使用或操纵其数据的控制器：https://docs.angularjs.org/guide/services

e.g。像这样的东西

app.service('todoService', function() {
    var myTodos = [];
    this.addTodo = function (todo) {
        myTodos.push(todo);
    }
    this.getAllTodos = function(filter) {
       return myTodos.filter(filter);
    }
});

app.controller('firstController', function($scope, todoService) {
    // use todoService.addTodo() and such stuff
});

Angular UI路由器 - 在ui视图外访问$ scope

1 个答案: