标签: angularjs-components

我正在使用 angular 5 示例项目，想要使用 angular5 组件结构为屏幕截图或捕获屏幕视频构建功能。

我有以下组件:

angular.module('foo')
    .component('searchInput', {
        bindings: {
            text: "<query"
        },
        templateUrl: 'components/searchInput/searchInput.html',
        controller: 'SearchInputCtrl'
    });

以下通过:

expect(component.text).toBe('bar');

我必须使用以下代码:

    var component = $componentController('searchInput',
        {$scope: {}},
        {
            text: 'bar'
        }
    );

但是,我想测试绑定到'text'的值来自'query'.这不起作用:

    var component = $componentController('searchInput',
        {$scope: {}},
        {
            query: 'bar'
        }
    );

这是我以前用角度指令做的一件事

angular.module('app.directives').directive('login', ['$templateCache', function ($templateCache) {
    return {
        restrict: 'E',
        template: $templateCache.get('directives/login/login.html'),
        controller: 'LoginController as vm',
        scope: true
    };
}]);

我已经非常依赖于使用模板缓存在我的指令模板中注入HTML内容.现在有了Angular 1.5,所有很酷的孩子都使用了这个新东西叫做component(),我正在看看它是否真的很好而且我在这个最开始的部分陷入困境:如何在组件本身注入东西(不在控制器中)？

在这种情况下,您可以看到我正在向login指令注入$ templateCache依赖项.我如何将此指令重写为组件？(请记住我希望在templateUrl上使用$ templateCache)

我的组件对象如下所示:

var options = {
    bindings: {
        title: '<',
        rows: '<'
    },
    controller: registers,
    templateUrl: function ($element, $attrs) {
        return '/app/dashboard/registers/register.html';
    }
};

我需要访问绑定title和rows我的register.html标记.我理解$element,$attrs但我不太确定如何将其注入到templateUrl中,这是一个HTML文件的字符串引用.

我希望能够在模板中使用这些值:

<p>Title: {{vm.title}}</p>
<p>Rows: {{vm.rows}}</p>

有人能指出我的方向,templateUrl可以使用花括号将绑定的值嵌入到标记中吗？

我正在使用AngularJS 1.5.8。我有“ myParent”和“ myChild”组件。我认为，我的父母中有1个父母和2个孩子。所以我的问题是：我想在“ myParent”组件的控制器中拥有子“ myChild”组件的实例，并仅向特定的孩子发出命令 makePrimary（），或者像这样...我如何实现这个目标？

JS：

//var myApp = 
angular.module('myApp', ['myChild', 'myParent']);

angular.
module('myChild', []).
component('myChild', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Child</div>' +
    '<div class="panel-body">' +
    'Child content...' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myChildController($scope, $element) {

    }
  ]
});

angular.
module('myParent', ['myChild']).
component('myParent', {
  template: '<div class="panel panel-default">' +
    '<div class="panel-heading">Parent</div>' +
    '<div class="panel-body">' +
    '<my-child></my-child>' +
    '<hr />' +
    '<my-child></my-child>' +
    '</div>' +
    '</div>',
  controller: ['$scope', '$element',
    function myParentController($scope, $element) { …

我有一个来自API的Methode.它返回一个解析为$ ctrl(？)对象的promise.此对象应包含度量,并在收到新数据时进行更新.

getMeasurements.latest(filter)     //only a object to filter through all measurements
    .then(function (latestMeasurement) {
        $ctrl.latestMeasurement = latestMeasurement;
});

我的问题是我不知道如何处理这些数据或在我的html文件中显示它.$ ctrl如何工作？

这里是API 的文档

我的指令需要一个常量(MODULE_ROOT_URL)来生成模板路径.使用指令语法,我可以将常量注入目录工厂函数.如何将此指令转换为Angular 1.5组件？是否可以将服务注入Angular 1.5组件？

谢谢.

更新:我知道可以将服务注入组件控制器.但是,如何为组件的templateUrl属性注入服务？

Update2:请参阅plnkr.我创建了指令和组件版本.指令版本工作正常.但组件版本有错误[ngTransclude:orphan]

https://plnkr.co/edit/DMumuIpXJY6RDCX6XObz?p=preview

angular.module('AbcModule')
       .directive('abcDirective', ['MODULE_ROOT_URL', function (MODULE_ROOT_URL) {
           return {
               restrict: 'E',
               templateUrl:  MODULE_ROOT_URL + 'abc/abc.tpl.html'
           }

       }]);

有一些流行的递归角度指令Q&A在那里.一个优雅的解决方案是将递归功能抽象为服务并在指令'compile'阶段调用它:

堆栈溢出答案

如果我想在新的Angular 1.5 .component()而不是.directive()中使用相同的概念,最好的方法是什么？

我有一个父组件说purchaseComponent和一个子组件说supplierComponent.当我在完整视图中加载时,供应商组件独立工作.我也成功加载了supplierComponent一个模态里面purchaseComponent.

我需要的是当我单击addSupplier其中的按钮supplierComponent时应该完成其当前功能然后hide从中调用方法purchaseComponent.

supplierComponent

angular.module('TestApp').component('addsupplierComponent', {
    templateUrl: 'addsuppliercomponent/addsupplier.html',
    controller: AddsupplierController,
    controllerAs: 'addsupplierCtrl'
});

function AddsupplierController(){
    var vm = this;
    vm.addSupplier = addSupplier;
    function addSupplier(){
        console.log("supplier component")
    }
}

purchaseComponent

angular.module('TestApp').component('purchaseComponent', {
    templateUrl: 'purchasecomponent/purchase.html',
    controller: PurchaseController,
    controllerAs: 'purchaseCtrl'
});
function PurchaseController(ProductService, LogService){
    var vm = this;
    vm.hideModal = hideModal;
    function hideModal(){
        console.log("Hide Modal")
    }
}

purchase.html

<div class="modal-body">
        <div class="card-content table-responsive">
            <addsupplier-component></addsupplier-component>
        </div>
 </div>

结果我需要:当我点击addSupplier …

我正在尝试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; …