javascript - Angular 分析 View 变量

Question

我一直无法跟踪应用程序 UI 中的一些更细微的变化。

可以在 DOM 中访问的“状态”变量应该放在哪里？我研究过使用 Angulartics，但它对于我的需要来说太重量级了，它只是一个用于跟踪状态的 JS 对象。

例如:

var myApp = angular.module("myApp", [ 'ui.router','ct.ui.router.extras.dsr']); 
app.config(function ($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise("/"); 
        $stateProvider
    .state('main',
    url:"/main",
             deepStateRedirect: true,
    views : {
        pane: {
            templateUrl : 'tpl.pane-0.html'
            },
        }
    )
.state('files',
    url: '/files',
             deepStateRedirect: true,
    views : {
        pane : {
            templateUrl : 'tpl.pane-1.html'
            },
        'first@files' : {
            templateUrl : 'tpl1.first.html',
                          deepStateRedirect: true
            },
        'second@files' : {
            templateUrl : 'tpl1.second.html',
                          deepStateRedirect: true
            },  
        },
    )
  });

请指教。

Answer 1

您可以将其作为路由参数传递。

来自 ui.router 文档的示例。

$stateProvider
  .state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function($stateParams) {
      // If we got here from a url of /contacts/42
      expect($stateParams).toBe({
        contactId: "42"
      });
    }
  })

完整的文档页面:https://github.com/angular-ui/ui-router/wiki/URL-Routing

如果您想与其他 Controller 共享该值，您可以将其存储在这样的值中。

angular.module('myApp').value('contactId', '');

$stateProvider
  .state('contacts.detail', {
    url: "/contacts/:contactId",
    templateUrl: 'contacts.detail.html',
    controller: function($stateParams, contactId) {
      // If we got here from a url of /contacts/42
      contactId = $stateParams.contactId;

    }
  })

稍后其他 Controller 可以导入 contactId 作为可注入(inject)引用并使用它。