通用 AngularJS 组件

Question

我正在尝试制作一个通用组件来显示变量并可能从其范围调用方法。

写 <component config-name></component> 感觉很自然，所以我坚持使用属性指令中的变量填充通用组件范围的想法。

该指令将提供要显示的变量、要调用的方法等。

我最终得到了这样的结果：

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

app.component('component', {
  template: '<li>{{data}}</li>'
});

app.directive('dirA', function() {
  return {
    restrict: 'A',
    controller: function($scope) {
      $scope.data = 'First directive!';
    }
  };
});

app.directive('dirB', function() {
  return {
    restrict: 'A',
    controller: function($scope) {
      $scope.data = 'Second directive!';
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>

<h2>Expectations</h2>
<ul>
  <li>First directive!</li>
  <li>Second directive!</li>
</ul>

<h2>Reality</h2>
<ul ng-app="app">
  <component dir-a></component>
  <component dir-b></component>
</ul>

但是，组件的作用域仍然是空的。我怎样才能使指令填充其组件元素的范围？

这甚至是 AngularJS 做事方式吗？如果没有，做类似事情的最佳方法是什么？

Answer 1

你做错了，组件更像是一个指令，但也更像是以 angular 1.5 开头的指令的替代品。

注意：组件只是指令的改进版本，因此您不必将指令作为属性传递给组件。要将值传递给组件，请使用绑定：

angular.module('myApp')
    .component('component', {
        templateUrl: 'component.html',
        controller: function ComponentCtrl(){
            this.innerProp = "inner";  //Tied to controller scope
        },
        controllerAs: 'vm',   // Replaces scope, by default components use `$ctrl`
        bindings: {
           input: '=?'
        }
});

在component.html你可以做：

<div>
    {{vm.innerProp}} /*Scope variable from controller*/
    {{vm.input}} /*Attribute from bindings*/
</div>

在 parent component/template 中你可以：

<component input="someModel"></component>

在parent模板中传递给输入的值将传递给component.html并替换vm.input

通用 AngularJS 组件

Generic AngularJS component

angularjs

angularjs-directive

angularjs-scope

angularjs-components