如何使用AngularJS在兄弟组件中运行函数？

17 浏览
0 Comments

如何使用AngularJS在兄弟组件中运行函数？

我需要在一个控制器中点击一个按钮，并让它触发/运行一个兄弟控制器中的函数，使用AngularJS实现。

在我的（非常简化的）示例中，我有一个头部组件和一个内容组件。我有两个按钮，可以改变一个对象的颜色（实际场景比这个复杂得多）。我需要能够从另一个组件中调用这些相同的函数。

这是Plunker示例

INDEX.HTML



  
    
    
    
    
    
    
    
  
  
      
      
  



SCRIPT.JS




console.clear();
function headerController() {
  var model = this; 
  model.test = "测试头部";
  console.log(model);
}
function contentController() {
  var model = this;
  model.test = "测试内容";
  model.makeRed = function() {
    model.colorme = "红色";
  }
  model.makeBlue = function() {
    model.colorme = "蓝色";
  }
  console.log(model);
}
var app = angular.module("app", []);
app.component("headerComponent", {
    template: $("#header-template").html(),
    controllerAs: "model",
    controller: [headerController]
});
app.component("contentComponent", {
    template: $("#content-template").html(),
    controllerAs: "model",
    controller: [contentController]
});





STYLE.CSS




.blue { background-color: blue; color: white; }
.red { background-color: red; color: white; }
0

1 答案

0 Comments

AngularJS中如何在兄弟组件中运行函数？

在AngularJS中，有三种方法可以在组件之间共享数据或函数：

1. 糟糕的方法：使用<和=绑定来共享函数，但这种方法非常丑陋，应该避免使用。





function parentController(TransactionFactory) { 
  var model = this; 
  model.transaction = TransactionFactory;
  model.selectAll = null;
  model.deselectAll = null;
}
function headerController(TransactionFactory) {
  var model = this; 
  model.transaction = TransactionFactory;
}
function contentController(TransactionFactory) {
  var model = this;
  model.transaction = TransactionFactory;
  model.selectAll = function() {
    //mark all fields as selected
    model.isSelected = true;
  }
  model.deselectAll = function() {
    //deselect all fields that are selected
    model.isSelected = false;
  }
  this.$onInit = function() {
    model.cSelectAll = model.selectAll;
    model.cDeselectAll = model.deselectAll;
  }
}
var app = angular.module("app", ['multipleSelection']);
app.factory('TransactionFactory', function () {
    var transaction = {
        fields: [
          {label: "field 1"}, 
          {label: "field 2"}, 
          {label: "field 3"}, 
          {label: "field 4"}, 
          {label: "field 5"}]
    };
    return transaction;
});
app.component("parentComponent", {
    template: $("#parent-template").html(),
    controllerAs: "model",
    controller: ["TransactionFactory", parentController]
});
app.component("headerComponent", {
    template: $("#header-template").html(),
    controllerAs: "model",
    controller: ["TransactionFactory", headerController],
    bindings: {
      selectAll: '<',
      deselectAll: '<',
    }
});
app.component("contentComponent", {
    template: $("#content-template").html(),
    controllerAs: "model",
    controller: ["TransactionFactory", contentController],
    bindings: {
      cSelectAll: '=',
      cDeselectAll: '=',
    }
});

2. 正确的方法：使用绑定(<或=)在具有相同父级的组件之间共享变量或函数。







function headerController() {
  var model = this;
  model.test = "test header";
}
function contentController() {
  var model = this;
  model.test = "test content";
  model.makeBlue();
}
function rootController() {
  var model = this;
  model.makeRed = function() {
    console.log('red');
    model.colorme = "red";
  }
  model.makeBlue = function() {
    console.log('blue');
    model.colorme = "blue";
  }
}
var app = angular.module("app", []);
app.component("rootComponent", {
  template: $("#root-template").html(),
  controllerAs: "model",
  controller: [rootController]
});
app.component("headerComponent", {
  template: $("#header-template").html(),
  controllerAs: "model",
  controller: [headerController],
  bindings: {
    makeRed: '&',
    makeBlue: '&',
    colorMe: '<',
  }
});
app.component("contentComponent", {
  template: $("#content-template").html(),
  controllerAs: "model",
  controller: [contentController],
  bindings: {
    makeRed: '&',
    makeBlue: '&',
    colorMe: '<',
  }
});





3. 完美的方法：使用angular.service来存储和修改状态，并在组件之间共享。


以上是解决该问题的原因和方法。
0