标签: angularjs-components

我创建了一个组件,需要引用创建组件的对象.我没有上班,所有的考试都失败了.下面,我试着描述一下这个意图.

组件定义可能如下所示:

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "template.html",
        controller: [
            MyController
        ],
        bindings: {
            myObject: '='
        }
    });

function MyController(myObject) {
    var vm = this;

    vm.myObject = myObject;
}

在服务中我想创建我的对象:

function createMyObject(args) {
        var myObject = {some: data};

        myObject.ref = "<my-component myObject='{{myObject}}'></my-component>";
        return myObject;
    }

题

如何将数据传递给角度组件标签？我是否必须切换回组件指令才能使其正常工作？

任何想法都非常感谢.谢谢.

我有一个简单的contactList组件,它有2个绑定:contacts和onRemove.

• contacts 只是一组要显示的联系人
• onRemove 是一个回调函数

app
  .component('contactList', {
    template: 
      `<div ng-repeat="c in $ctrl.contacts">
         {{c.name}}
         <div ng-click="$ctrl.onRemove({contact: c})">Remove</div>
       </div>`,
    bindings: {
      contacts: '<',
      onRemove: '&'
    },
    controller: function() {}
  })

我在我的应用程序中多次使用此组件.而onRemove回调可以表现不同,这取决于其中的contactList组件习惯.例:

• contactMainView(=组件)显示搜索栏以及使用该contactList组件生成的联系人列表.onRemove将从数据库中删除联系人.

• groupMembersView使用contactList组件显示属于给定组的所有联系人.这里不应该删除联系人,但onRemove不会设置.

思路:

首先我想,我可以使用ng-if="$ctrl.onRemove"但不起作用,因为onRemove它永远不会undefined在contactList组件中.console.log(this.onRemove)总是打印:function(locals) { return parentGet(scope, locals); }

当然我可以使用另一种showRemove: '@'绑定,但这对我来说看起来并不干净.

你有任何想法或更好的解决方案来完成任务吗？

所以我有一个包含表单的模板的组件.

mycomponent.html:

<div>
    <form name="myForm"> 
        <!-- more html code -->
    </form>
</div>

如何在组件控制器中访问myForm？目前我正在注入$ scope来从中获取它.或者这是获得表格的唯一方法吗？

编辑:添加一些代码,以更好地说明在JavaScript中

angular.module('example')
.component('myComponent', {

    templateUrl: 'mycomponent.html',
    controller: function($scope) {
         $scope.myForm // This works
         this.myForm // undefined, can I access it through the component scope instead of $scope somehow? 
    }
 });

我可以在AngularJS 1.5组件中使用多个模板吗？我有一个组件有一个属性,所以我想根据该属性名称加载不同的模板.如何根据元素的属性名称加载模板？

jsConfigApp.component('show', {
templateUrl: 'component/show.html',  //How to change it based on attribute value?
bindings:{
    view:"@"
},
controller: function () {
    console.log(this.view)
    if (this.view = "user") {
       console.log("user")
    } else if (this.view = "user") {
        console.log("shop")
    } else {
        console.log("none")
    }      
}
})

谢谢.

我正在尝试对AngularJS 1.5(带有Webpack)组件的(子)控制器进行单元测试,该组件需要父组件和来自另一个模块的控制器.

子控制器结构:

function ChildController () {
  var vm = this;

  vm.searchText = '';

  vm.submit = function() {
    var data = {};
    data['srch'] = vm.searchText;
    vm.parentCtrl.submitTextSearch(data);
  };
}

module.exports = ChildController;

子组件:

var template = require('./child.html');
var controller = require('./child.controller');

var childComponent = {
  require: {
    parentCtrl: '^parent'
  },
  template: template,
  controller: controller,
  controllerAs: 'vm'
};

module.exports = childComponent;

所以我想要做的是模拟childController的submit() - 函数所需的parentCtrl.我一直无法找到如何实际做到这一点.我已经找到了一些类似的子父指令解决方案并尝试了这些解决方案,例如通过假子HTML元素注入父控制器,如此子父指令示例中所述,基本上相同的stackoverflow解决方案没有结果.我的问题至少在于子控制器和父控制器位于不同的模块中.而且我认为范围技巧并不是Angular 1.5风格的那么多？

我的Jasmine测试的骨架没有我失败的模拟尝试:

describe('child component', function() {
  describe('child controller', function() {
    var controller;
    beforeEach(angular.mock.module('child'));
    beforeEach(inject(function(_$componentController_) …

当我发现AngularJS中有很多组件时,我正在阅读有关指令的内容,并想知道指令和组件之间的区别.

有一个功能组件,类型组件,服务组件,过滤器组件,提供程序组件等...然后,我发现模块组件是由指令,服务,过滤器,提供程序,模板,全局API组成的组件. ,并测试嘲笑.这往往会让事情变得更加混乱.我在Angular文档中找不到"组件"的定义,它可以解释列出的组件类型之间的区别.

那么AngularJS中的"组件"到底是什么？它是否像可重用的代码块一样简单？

顺便说一句,我目前正在使用Angular 1.4.2版.

我想知道将功能传递到2个或更多级别组件的最佳方法是什么？使用'&'绑定时,没有简单的方法可以跳过函数换行？

这是一个用例:

angular.module('app', []).component('app', {
  controller: class AppController {
    doSomething (data) {}
  },
  template: `
    <sub-component on-do-something="$ctrl.doSomething(data)">
    </sub-component>
  `
})

ps:我正在使用ngRedux,所以这种情况很常见

编辑:

问题是:为了使上面的代码工作,每个内部组件控制器将如下所示:

.component('subComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function SubComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <inner-component do-something="$ctrl._doSomething(data)">
        </inner-component>
    `
});

.component('innerComponent', {
    bindings: {
        doSomething: '&'
    },
    controller: function InnerComponentController () {
        this._doSomething = param => this.doSomething({data: param});
    },
    template: `
        <sub-inner-component do-something="$ctrl._doSomething(data)">
        </sub-inner-component>
    `
});

然后我必须传递_doSomething而不是doSomething直接传递. …

随着AngularJS 1.5的发布,我认为分解我现有的应用程序以使用他们所倡导的新的基于组件的架构是个好主意.

我能够将大部分应用程序转换为组件,但在尝试拆分表时遇到了问题.我认为将每个表行作为一个单独的组件是有意义的,因为每一行都有由数据控制的特定格式(该应用程序用于显示日志,每行都有颜色编码,可能会根据过滤器设置淡出)和行的内容).但是,我遇到了自定义元素无法在表内工作的问题.

我知道使用指令,您只需将其更改为属性指令并将其应用于表行元素,但该选项似乎不适用于新组件.另外,我并不特别喜欢这个解决方案,因为指令/组件需要将一个类应用于表格行以进行格式化.如果在模板中声明行而不是封闭元素,那么这样做会更清晰.

我还发现了一个古老的"替换"参数,看起来它对于这个用例来说是完美的,但不幸的是,它被弃用并删除了两个主要版本之前.遗憾的是,我无法找到该功能的替代品.

有没有一种方法可以使新组件在表内工作？如果没有,是否有另一种方法可以完成我想要做的事情而不诉诸属性指令？

我有一个Angular 1.5.3组件似乎没有更新双向绑定的值.我的控制器更改传递给组件的值.

当控制器初始化时,该组件似乎读取默认值,但之后就像是单向绑定一样.未在组件中读取对绑定值的任何未来更改.

我从一个类似的功能指令转换它,双向绑定工作得很好.是否存在变更事件或类似事件,我缺少组件？我是否需要向组件控制器添加特定逻辑,以便组件模板可以读取绑定值？

实现组件的菜单模板:

<div data-ng-controller="MenuCtrl as ctrl">
    <!-- below shows ctrl values updating when controller changes them -->
    <pre>{{ctrl.menu}}</pre>
    <pre>{{ctrl.settings}}</pre>
    <!-- changes not reflected in component -->
    <my-sub-menu menu="ctrl.menu" settings="ctrl.settings"></my-sub-menu>
</div>

子菜单组件:

(function () {
'use strict';
angular
    .module('myApp.components')
    .component('mySubMenu', {
        bindings: {
            menu: '=',
            settings: '='
        },
        templateUrl: 'subMenu.component.html',
        controller: function () {
            // implementation that reads menu and settings
        }
    });
})();

简化的子菜单组件模板:

<ul>
    <li ng-show="settings.menu1"><a href="/">Menu 1</a></li>
    <li ng-show="settings.menu2"><a href="/">Menu 2</a></li>
    <li ng-show="settings.menu3"><a href="/">Menu 3</a></li> …

我正在尝试在呈现页面之前解析客户列表.

这是状态提供程序引用,我有解决方法.

angular.module('app')
  .config(($stateProvider) => {
    $stateProvider
      .state('customers', {
        url: '/customers',
        template: '<customers></customers>',
        resolve: {
          test: function () {
            return 'nihao';
          },
        },
      });
  });

其次是组件,它应该从解析中调用#test.应该做的就是将"nihao"这个词打印到控制台.

(function myCustomersConfig() {
  class MyCustomersComponent {
    constructor(test) {
      this.test = test;
      console.log(this.test);
    }

  angular.module('app').component('myCustomers', {
    templateUrl: 'app/customers/customers.html',
    controller: MyCustomersComponent,
  });
}());

但是,我不断收到此错误:

angular.js:13708 Error: [$injector:unpr] Unknown provider: testProvider <- test
http://errors.angularjs.org/1.5.7/$injector/unpr?p0=testProvider%20%3C-%20test
    at angular.js:68
    at angular.js:4502
    at Object.getService [as get] (angular.js:4655)
    at angular.js:4507
    at getService (angular.js:4655)
    at injectionArgs (angular.js:4679)
    at Object.invoke (angular.js:4701)
    at $controllerInit (angular.js:10234) …