标签: angularjs-controller

如果你有一个控制器来操作Angular.js中的$ scope变量,是否有一种惯用的方法:

• 重置控制器的$ scope,和
• 重启控制器初始化

对于复杂的控制器,不必将每个变量重置为其初始值非常方便,特别是如果您真正想要的是控制器和示波器的简单重新初始化.但是,再次导航到同一个URL $location.path()并没有帮助.

编辑:假设我无法使用任何$window.location黑客,因为这会违反Chrome打包应用中的CSP.

我们在Angular Controller中有很少的方法,它们不在范围变量上.

有谁知道,我们如何在Jasmine测试中执行或调用这些方法？

这是主要代码.

var testController = TestModule.controller('testController', function($scope, testService)
{

function handleSuccessOfAPI(data) {
    if (angular.isObject(data))
    {
       $scope.testData = data;
    }
}

function handleFailureOfAPI(status) {
    console.log("handleFailureOfAPIexecuted :: status :: "+status);
}

 // this is controller initialize function.
 function init() {
    $scope.testData = null; 

    // partial URL
    $scope.strPartialTestURL = "partials/testView.html;

    // send test http request 
    testService.getTestDataFromServer('testURI', handleSuccessOfAPI, handleFailureOfAPI);
}

 init();
}

现在在我的茉莉花测试中,我们传递"handleSuccessOfAPI"和"handleFailureOfAPI"方法,但这些都是未定义的.

这是茉莉花测试代码.

describe('Unit Test :: Test Controller', function() {
var scope;
var testController;

var httpBackend;
var testService;


beforeEach( function() { …

我已经创建了一个完整的例子来描述这个问题.我的实际应用程序甚至比演示的演示版还要大,每个控制器都有更多的服务和指令.这导致更多的代码重复.我尝试将一些代码注释用于澄清, PLUNKER:http://plnkr.co/edit/781Phn？p = preview

重复部分:

routerApp.controller('page1Ctrl', function(pageFactory) {
  var vm = this;

  // page dependent
  vm.name = 'theOne';
  vm.service = 'oneService';
  vm.seriesLabels = ['One1', 'Two1', 'Three1'];

  // these variables are declared in all pages
  // directive variables,
  vm.date = {
    date: new Date(),
    dateOptions: {
      formatYear: 'yy',
      startingDay: 1
    },
    format: 'dd-MMMM-yyyy',
    opened: false
  };

  vm.open = function($event) {
    vm.date.opened = true;
  };

  // dataservice
  vm.data = []; // the structure can be different but …

我想在我的指令中使用'controllerAs'选项.让我引用" Google封闭用户的AngularJS风格指南 "中的推理:

为什么？将方法和属性直接放在控制器上,而不是构建范围对象,更适合Google Closure类样式.此外,使用"controller as"可以清楚地了解当多个控制器应用于元素时您要访问的控制器.因为总有'.' 在绑定中,您不必担心原型继承掩盖原语.

但是,如果指令具有隔离范围绑定,我可以看到使用此方法的问题.

angular.module('cmw').directive('fooWidget', function() {
    return {
        controller: function() {
            this.qux = '123';
        },
        controllerAs: 'fooWidget',
        scope: {
            bar: '='
        },
        template: ' {{fooWidget.qux}}  {{bar}} '
    };
});

在这种情况下,bar属性附加到范围,而不是附加到控制器,这导致混淆不一致的情况,其中应该在不同的位置查找不同的属性.什么是"官方"推荐的解决方法？

更新:请参阅GitHub有关此问题.

将控制器与视图模板/部分关联的方式有两种(AFAIK):指定的路径$routeProvider和ngController指令.特别是(但不是唯一的)简单路由,是否有任何优势/效率？

我的项目目前使用$ routeProvider方法,但我已经完成了嵌套视图的任务.使用ngInclude看起来很简单,只要partial指定了它的ngController.

是否可以将控制器注入另一个属于同一模块的控制器？

例:

var app = angular.module('myAppModule', [])
.controller('controllerOne', ['$scope', function($scope){
  $scope.helloWorld = function(){
    return 'Hello World';
  }
}])
.controller('controllerTwo', ['$scope', 'controllerOne', function($scope, controllerOne){
  console.log(controllerOne.helloWorld());
}])

我一直在controllerOne上得到未知的提供者.我不知道它是如何可能的,因为它们在同一个模块中共存.任何帮助将非常感激.

我听说在使用隔离范围的指令中使用controllerAs语法是一个好习惯bindToController: true.参考文献:一,二

假设,我有这样的指令:

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    link: function(scope) {
      scope.User = User;
      scope.doSomething = function() {
        // Do something cool
      };
    }
  };
});

<!-- my-template.html -->
<div>
  User Id: {{ User.id }}
  Name: {{ name }}
  <button ng-click="doSomething()">Do it</button>
</div>

如您所见,此指令中没有控制器.但是,为了能够利用controllerAs,bindToController: true我必须有一个控制器.

将链接功能转换为控制器是最佳做法吗？

angular.module('MyModule').directive('MyDirective', function(User) {
  return {
    scope: {
      name: '='
    },
    templateUrl: 'my-template.html',
    bindToController: true,
    controllerAs: 'myCtrl', …

我已经定义了一个模块,并使用ng-app指令将其作为我的应用程序的主要模块.我使用angular.module('myApp').controller()将两个控制器添加到主应用程序中.其中一个控制器具有页面范围,而另一个控制器是子控制器.

我现在要做的是包含一个属于另一个模块的控制器(不是主myApp模块),但我无法弄明白.我不想全局命名空间控制器.

有人知道怎么做吗？

这是我到目前为止:

<!doctype html>
<html lang="en" data-ng-app='myApp' data-ng-controller='myApp.mainController'>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $(function() {
      var app, module;

      //create two modules, one of which will be used for the app base
      app = angular.module('myApp', []);
      module = angular.module('otherModule', []);

      //create main controller for main app
      app.controller('myApp.mainController', function($scope) {
        $scope.content = 'App main controller content';
      });

      //create child controller for main app
      app.controller('myApp.subController', function($scope) {
        $scope.content = 'App sub controller content';
      });

      //create a controller for the …

我正在学习Angular.js,我无法弄清楚这个简单的代码有什么问题.它看起来很好,但给我跟随错误.

**Error**: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

在添加之前(我只是保留它)它给了我以下错误.这是为什么？ng-app="app"ng-app

Error: [ng:areq] http://errors.angularjs.org/1.3.14/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:6:417
    at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:19:510)
    at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:20:78)
    at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:75:331)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:57:65
    at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:7:408)
    at A (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:56:443)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:299)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:51:316)

<!doctype html>
    <html ng-app="app">
      <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

      </head>
      <body>
        <div ng-controller="Ctrl">
          <input ng-model="name">
          <h1>{{name}}</h1>
          <h2>{{age}}</h2>
        </div>

         <script>
          var Ctrl = function($scope)
           {
              $scope.age = 24;
           };
          </script>


      </body>
    </html>

对于高级角度用户来说,这可能是一个简单的问题,但我没有在某个地方找到这个问题.

所以我正在重构我的代码,当我意识到,我在视图中有两个控制器,这不是问题,当控制器'ACtrl'被$ stateProvider绑定并且控制器'BCtrl'在视图中通过ng-controller绑定.但是当我尝试在$ stateProvider中分配它们时,如下所示:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl', 'BCtrl'
        }
    }
}); 

或者那个:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl',
            controller: 'BCtrl'
        }
    }
});

它不会起作用.

我知道这将是一个解决方案,使控制器的内容达到一个,但控制器'ACtrl'也在其他地方使用,所以我不得不在其他地方重复自己.我该怎么解决这个问题......