问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

requirejs写组件，两个组件在同一页面使用的，但组件1使用require属性获取不到组件2的ctrl到link里面呢？

头像
好宾友
    312
    新手上路，请多包涵

    1、我使用requirejs方式编写directive，两个组件在同一页面使用的，但组件1使用require属性获取不到组件2的controller到link里面呢？
    2、
    组件1：

    define(['app','ModuleService','ParamFactory','ProductListsFactory'],function (app) {
  app.directive('headerSearch',['ModuleService','$rootScope','ParamFactory','$ionicLoading','ProductListsFactory',
    function (module,$rootScope,ParamFactory,$ionicLoading,ProductListsFactory) {
    return {
      restrict:'AE',
     scope:{tdSearch:'&',keywords:'@'},
      templateUrl:'module/headerSearch/headerSearch.html',
      require:'?^productItem',
      link:function (scope, element, attrs,ctrl) {
        console.log('---------------------------');
        console.log(ctrl);
        console.log('===========================');
      },
      controllerAs:'headerSearchCtrl'
    }
  }]);
});

    组件2：

    define(['app','ModuleService'],function (app) {
   app.directive('productItem',['ModuleService',function (module) {
    return {
      restrict:'E',
     scope:{lists:'@',module:'@'},
      link:function (scope, element, attrs) {
      },
      templateUrl:'module/productItem/productItem.html',
      controller:function ($scope) {

      }
    }
  }]);
})

    页面：

    <ion-view>

  <header-search keywords="{{keywords}}"></header-search>
  <product-item module="{{mymodule}}"></product-item>

</ion-view>

    错误：

    clipboard.png

    html5javascriptangularjsdirective
    阅读 3.2k
    2 个回答
    得票最新
    头像
    杰枫Jeff
      2k103252

      其实应该是理解的问题

      require:'?^productItem',

      中 ^表示的的是

      The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).
      https://code.angularjs.org/1....

      也就是说，这个符号表示搜索父级元素，而在你的应用中，两个指令元素是兄弟关系。

      头像
      好宾友
        312
        新手上路，请多包涵
        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/angular/angular.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl1">

  <!--这样写不行
  <d1>1111</d1>
  <common></common>-->
  <common>
    <d1>1111</d1>
  </common>
</div>

<script>
  var app = angular.module('app',[]);
  app.controller('ctrl1',function ($scope) {
    console.log('ctrl1');
  });
  app.directive('common',function(){
    return {
      controller: function($scope){
      this.method1 = function(){
        console.log('method1');
      };
      this.method2 = function(){
        console.log('method2');
      };
    }
  }
  });

  app.directive('d1',function(){
    return {
      require: '?^common',
      link: function(scope,elem,attrs,common){
        console.log(common);
      scope.method1 = common.method1;
    }
  }
  });

</script>

</body>
</html>

        我发现要包含才行。

        其实我想实现的是，
        组件1：查询编辑框、查询按钮
        组件2：查询列表
        但我发现异步查询的结果想转入组件2,要不用公共变量，要不用监听，要不就广播，都不是很好耦合较强。
        最好是传参给事件之类的，然后自动渲染列表。不知道能不能实现呢？

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题