角度UIルーター - uiビュー外の$ scopeにアクセス

Question

私のUIビューの外に$ scopeにアクセスしたいと思います。私のアプリの構造は簡単です。それはここでは、完全なコードは、このMy todo app design

のような3枚のパネルを持つのToDoアプリですhttps://github.com/udayghulaxe/ticitic_todo

私は第三パネルで詳細を行うにアクセスしたい、である、と私はそれが$を使用してくださいする必要が欲しいです私は3つのパネルに別々のコントローラを割り当てています。私はクリックするとUIルータの状態を変更しています。 は、私はちょうど私が$ rootScopeでデータを渡したくない

<!-- 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>

第三のパネルにデータを行うにアクセスしたい、と私はTODO項目をクリックして、両方のTODOリストを作成し、詳細を行うには、今すぐクリックしたときに、真ん中のテンプレートを消すだけです。

変数名$scopeはすでにヒントとして、それが目的だ

Answer 1

を私はUIビューの外に私の「藤堂詳細表示」を追加したので、私はこの問題に直面していると私は「藤堂詳細表示」内のデータにアクセスしたいのですスコープがあり、したがって外部からアクセスできないようにする必要があります。前述の$ rootScopeは、うまく接続された子/親の間でやりとりする方法です。 https://docs.angularjs.org/guide/services

例えば：

異なるコントローラ間でデータを共有するための「推奨」の方法は、IMO彼らのデータを消費するか、操作するすべてのコントローラに注入されている通常の角度のサービスであり、このようなもの

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 
});