Question

我有这样的节点

// Confusion over how to pass a scalajs defined component to a javascript defined component

object GriddleComponentWrapper {
  // for customComponent I've tried js.Any, ReactComponentU 
  @ScalaJSDefined
  class ColumnMeta(val columnName: String, val order: Int, val customComponent: ReactClass=null) extends js.Object
}

case class GriddleComponentWrapper(results: js.Any, //Seq[Map[String, Any]],
                                   columns: Seq[String],
                                   columnMeta: Option[Seq[ColumnMeta]] = None,
                                   showSettings: Boolean = true,
                                   showFilter: Boolean = true
                                  ) {
  def toJS = {
    val p = js.Dynamic.literal()
    p.updateDynamic("results")(results)
    p.updateDynamic("columns")(columns)
    p.updateDynamic("showSettings")(showSettings)
    p.updateDynamic("showFilter")(showFilter)

    (columnMeta).foreach { case cm => p.updateDynamic("columnMetadata")(cm.toJsArray) }

    p
  }

  def apply(children: ReactNode*) = {
    val f = React.asInstanceOf[js.Dynamic].createFactory(js.Dynamic.global.Bundle.griddle) // access real js component , make sure you wrap with createFactory (this is needed from 0.13 onwards)
    f(toJS, children.toJsArray).asInstanceOf[ReactComponentU_]
  }

}

object MyTestGrid {

  @js.native
  class ColumnMetaProps(val data: js.Object, val rowData: js.Object, val metadata: js.Object) extends js.Object

  // I've tried making the Props argument js.Dynamic, and also the ColumnMetaProps above
  @JSExport
  val testComp = ReactComponentB[js.Dynamic]("Mine").renderP(
    (sc, props: js.Dynamic) => {
      //when debugging this in the browser, 'sc' and 'props' have inspectable object values with the expected members in the browser 
      //dev tools, BUT, they're undefined 
      log.info(s"what is ${sc.props}")
      log.info(s"what is $props")
      val string: Frag = if (!js.isUndefined(props)) props.data.toString() else "nothing!"
      <.h1(string)
    }).build

   @JSExport 
   val aCompletelyStaticComponentWithNoPropsWillWork = ReactComponentB[js.Dynamic]("MyStaticComponent").renderP(
    (sc, props: js.Dynamic) =>  <.h1("this renders!!") ).build


// am I passing the right thing to columnmeta with testComp.reactClass? 
 val columnMeta = (new ColumnMeta("c1", 1, testComp.reactClass) :: Nil).toJsArray

  val results = Seq(
    js.Dynamic.literal("c1" -> "row1c1", "c2" -> "row1c2"),
    ).toJsArray

  val component = ReactComponentB[js.Dynamic]("MyTestGrid")
    .render_P {
      props =>
        GriddleComponentWrapper(results, columns = "c1" :: "c2" :: Nil, columnMeta = Some(columnMeta))()
    }.build

  def apply() = component
}

我希望1和1之间的沟通2

我在stackoverflow上找到了一个类似

的方法

two.js

             3
       ------------
       |          |
     -----     ------
     1   |     2    |

three.js所

$scope.$emit('messageTwo', someValue(s));

one.js

$scope.$on('messageTwo', function( event, data ){
  $scope.$broadcast( 'messageTwo', data );
});

这种方法非常有效。我尝试了下面的选项，它的工作原理。以下代码也是正确的吗？

two.js

$scope.$on('messageTwo', someValue(s));

one.js

$scope.$emit('messageOne', someValue(s));

Answer 1

它确实有效，但是当范围一被破坏时，您需要手动取消注册侦听器。

var messageListener = $scope.$parent.$on('messageOne', ...)
$scope.$on('$destroy', messageListener)

您也可以反过来在父作用域甚至$rootScope上进行广播。

<强> two.js

$scope.$parent.$broadcast('messageOne', someValue(s));

<强> one.js

$scope.$on('messageOne', function( event, data ){
  console.log( data );
});

如果你需要访问event.targetScope中$。scope的$ scope，那么$ emit是可行的。

如果您只想共享数据，您还可以使用共享服务实例或仅使用共享父控制器范围内的变量。

Answer 2

如果您想在兄弟姐妹之间共享数据，您可以使用服务或工厂。

如果它在父母对孩子或孩子对父母之间，你可以使用$ broadcast或$ emit或者只是使用$ rootscope。

在兄弟姐妹Angularjs之间共享数据

2 个答案: