标签: angularjs-controlleras

我正在以这种方式制作一个包含3个子组件的组件:

<header-component>
<side-component>
<main-component>

主要组件包含英雄列表.标头组件包含两个按钮,用于将主组件上的视图切换到列表或网格视图.

我现在遇到的问题是将数据从header-component传递到main组件.因此,当我单击网格按钮时,主内容上的视图应更改为网格视图,对于行视图也是如此.

如何在角度1.5的子组件之间传递数据？

我试图在这里遵循John Papa的angularJS风格指南,并开始将我的指令转换为使用controllerAs.但是,这不起作用.我的模板似乎无法访问分配给vm的任何内容.看到展示行为的这个非常简单的plnkr示例.

http://plnkr.co/edit/bVl1TcxlZLZ7oPCbk8sk?p=preview

angular
    .module('app', []);

angular
    .module('app')
    .directive('test', test);

function test() {
    return {
        restrict: 'E',
        template: '<button ng-click="click">{{text}}</button>',
        controller: testCtrl,
        controllerAs: 'vm'
    }
}

angular
    .module('app')
    .controller('testCtrl', testCtrl);

function testCtrl() {
  var vm = this;
  vm.text = "TEST";
}

为什么我无法绑定到第二个控制器内的控制器变量？

<div ng-app="ManagerApp">
    <div ng-controller="MainCtrl">
        Main: 
        <div ng-repeat="state in states">
            {{state}}
        </div>
        <div ng-controller="InsideCtrl as inside">
            Inside:
            <div ng-repeat="state in inside.states2">
                {{state}}
            </div>
        </div>
    </div>
</div>

var angularApp = angular.module('ManagerApp', []);

angularApp.controller('MainCtrl', ['$scope', function ($scope) {
    $scope.states = ["NY", "CA", "WA"];
}]);

angularApp.controller('InsideCtrl', ['$scope', function ($scope) {
    $scope.states2 = ["NY", "CA", "WA"];
}]);

示例:https://jsfiddle.net/nukRe/135/

第二次ng-repeat不起作用.

我试图找出为什么我无法通过isolate scope(@)覆盖传递给angularJS指令的值.我尝试vm.index用以下内容覆盖值:

vm.index = parseInt(vm.index, 10)

但是,它由于某种原因不起作用.

如果我将其更改为:

vm.newIndex = parseInt(vm.index, 10)

有用.另外,在$scope作品上分配值.

为什么第一种方法不起作用？

我创建了这个示例plunker以供参考.

我正在重建一个记忆游戏,以熟悉控制器的视图语法.我把问题缩小到了检查功能; 但我可能错了.检查功能将卡作为参数传递但是当我使用console.log(卡)时,卡没有值,当卡应该具有数组平假名或可选字母的值.

   (function() {

// constant variables 
var constants = new (function() {
    var rows = 3;
    var columns = 6;
    var numMatches = (rows * columns) / 2;
    this.getRows = function() { return rows; };
    this.getColumns = function() { return columns; };
    this.getNumMatches = function() { return numMatches; };
})();

// Global Variables
var currentSessionOpen = false;
var previousCard = null;
var numPairs = 0;

// this function creates deck of cards that returns an …

我正在尝试按照角度的样式指南,写道我们应该使用thisinsted scope...

时尚指南

当我能够使用时,有人能解释我this吗？

这是我的尝试.....我做错了什么？

我正在尝试切换表格....这是我的HTML代码:

<a href="#" ng-click="formEdit(x)"  ng-if="!x.formEditShow">REPLY</a>
<a href="#" ng-click="formEdit(x)" ng-if="x.formEditShow" >CLOSE</a>

使用经典$scope我会在我的控制器中这样做:

$scope.formEdit = function(data){
data.formEditShow = !data.formEditShow;
}      

但this它应该看起来像这样(但不起作用):

var vm = this;
vm.formEdit = formEdit;

function formEdit(data){
    data.formEditShow = !data.formEditShow;
}

有人可以帮我理解这个吗？

我想使用函数更改ng-repeat循环中项目的值.

例如这不起作用.

HTML

<ul class="unstyled">
  <li ng-repeat="todo in todoList.todos">
      <span>{{todo.name}}</span>
      <button ng-click="example(todo)">Change me</button>
  </li>
</ul>

JS

$scope.example = function(v) {
  v.name = 'i am different now';
};

完整的例子

http://plnkr.co/edit/kobMJCsj4bvk02sveGdG

我有一个相当简单的AngularJS问题,我似乎无法找到答案:

$scope.$watch()在使用controllerAs和bindToController选项的同时,我如何在指令控制器中使用？

如果您需要澄清我的意思,请告诉我.

很长一段时间后,我不得不再集中一个角.但我失败了......

... ng-repeat ="在DataController.getObjects中的n"

myApp.controller('DataController', [function () {

    console.log('test 1');

    var getObjects = function () {
        console.log('test 2');
        return [1,2,3,4,5,6,7];
    };

}]);

它将测试1写入控制台但不测试2.并且前端没有得到阵列.

有什么暗示吗？

问候n00n

我正在尝试controllerAs在angularjs 1.5组件中使用语法。

这是一个小矮人 https://plnkr.co/edit/mTa1bvoNi1Qew9l1xAFS?p=preview

没有controllerAs一切，一切正常。

(function() {
  angular.module("myApp", [])
    .component("helloWorld", {
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: {
        name: '@'
      },
      controller: helloWorldController
    })

  function helloWorldController() {
    /* jshint validthis: true */
    var vm = this;
    vm.myName = 'Alain'
  }
})();

但是尝试更改为controllerAs，我不再获得绑定。

(function() {
  angular.module("myApp", [])
    .component("helloWorld", {
      template: "Hello {{vm.name}}, I'm {{vm.myName}}!",
      bindings: {
        name: '@'
      },
      controller: ('helloWorldController', helloWorldController)
    })

  function helloWorldController() {
    /* jshint validthis: true */
    var vm = this; …