标签: angularjs-view

我有一个简单的布局,如下所示:

__________________  ________
|                |  | Side |
|  Main section  |  | -bar |
|________________|  |______|

"主要部分"向用户公开表格; 根据他们的选择,"主要部分" state应该改变(即:应加载不同的部分).我如何为此提供便利UI.router？

例如:仅columnOne在/about州内更改:http://plnkr.co/edit/IzimSVsstarlFviAm7S7

我正在使用AngularJs和模板系统.我想为每个模板添加特定的内联javascript脚本,为选定的选项卡添加警告框(主页|列表|设置)

Html呈现: 但是添加了ng-scope,并且在更改选项卡时没有任何警报.

<script type="text/javascript" class="ng-scope">alert("home")</script>

我在这里提供示例:

http://bit.ly/HWcN1H

或者在这里

带有alert("template1")的plunkr示例存在于template1.html中,但呈现为

<script type="text/javascript" class="ng-scope">alert("template1")</script>

遵循MVC模式,一个控制器应该能够处理AngularJS中的多个视图.

例如,我有一个用于显示所有用户的视图和一个用于创建新用户的视图.我的 $routeProvider(摘录)看起来像这样:

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/showusers', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController'
      }).   
      when('/createuser', {
        templateUrl: 'partials/showusers.html',
        controller: 'userController'
      })
  }]);

两个视图共享多种方法,例如检索所有用户属性.这些共享方法可通过以下方式访问factory.

该userController(节选)目前看起来是这样的地方Users是一个工厂:

angular.module('supportModule').
  controller('userController', function($scope, Users) {
    var init = function(){
      $scope.users = Users.getAll();
      $scope.attributes = Users.getAttributes();
    }
    init();
  })

问题是:Users.getAll();当我在createuser视图上时,我不需要请求.

当然,我可以通过使用$location,$routeProvider纯粹的JS然后条件调用方法来轻松地解析路径- 但我认为在Angular中有一种更优雅和有效的方式:)
类似于典型的MVC框架,其中一个控制器有许多动作 -每个视图一个.

所以我的问题:
如何在控制多个视图的控制器中优雅地调用基于视图的方法？

我有一个实现向导的简单多视图Angular应用程序,因此每次用户单击"下一步"按钮时,应用程序将导航到下一个视图,"后退"按钮也相同.我有一个$routeProvider配置将所有视图绑定到同一个控制器.每个视图代表一个包含输入字段的巨大表单块,并$routeProvider管理它们之间的导航:

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/salespoints', {
        templateUrl: 'salespoints',
        controller: 'main'
    })
    .when('/users', {
        templateUrl: 'users',
        controller: 'main'
    })
    .otherwise({
        templateUrl: 'partner',
        controller: 'main'
    });

    $locationProvider.hashPrefix('');
}]);

问题是,每次用户单击"下一步"或"返回"时,都会调用控制器,因此$scope以前步骤所做的所有更改都会丢失:

app.controller('main', ['$scope', function ($scope) {
    console.log('controller invoked'); // appears each time a user presses "Next" or "Back", hence re-instantiation of $scope
}]);

应用程序足够小$rootScope,以防万一其他方法失败,但我只想避免这种情况作为反模式.

保持$scope最新状态的最佳方法是什么,从应用程序实例的生命周期的一开始就进行所有更改,而不是在每次更改视图时重新实例化？