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

发布于 2022-09-04 13:10:07 字数 1587 浏览 30 评论 0

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>

错误：

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑叹一世浮沉 2022-09-11 13:10:07

其实应该是理解的问题

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....

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

回复收藏 0

为你鎻心 2022-09-11 13:10:07

<!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,要不用公共变量，要不用监听，要不就广播，都不是很好耦合较强。
最好是传参给事件之类的，然后自动渲染列表。不知道能不能实现呢？

回复收藏 0

~没有更多了~