Javascript 自定义指令的控制器没有'；不能重复使用ng？

我试图建立2个自定义指令，我的瓷砖和我的瓷砖项目

“my tile”是接受数据数组参数的主指令

“我的磁贴项目”表示“我的磁贴”中的单个磁贴

但是我的平铺项控制器的btnOkClick（）方法不起作用

代码：

HTML:

my tile item指令：

angular.module('app').directive('myTile',
        [
            myTile
        ]);


    function myTile() {
       return {
           restrict: 'AE',
           scope: {
             tiles: '='
           },

           controller: ['$scope', MyTileController],
           controllerAs: 'myTileCtrl',


           templateUrl: 'myTile.html',

           link: function (scope, iElement, iAttrs) {
               console.log('abc');
           }
       };


       function MyTileController($scope) {
           var ctrl = this;
           ctrl.tiles = $scope.tiles;
       }

    }

angular.module('app').directive('myTileItem',
        [
            myTileItem
        ]);


    function myTileItem() {
        return {
            restrict: 'AE',
            scope: {

            },

            controller : ['$scope', MyTileItemController],
            controllerAs : 'myTileItemCtrl',

            link: function (scope, iElement, iAttrs) {

            }
        };


        function MyTileItemController($scope) {
            var ctrl = this;

            ctrl.btnOKClick = function () {
                alert('OK Clicked'); // ********* does NOT work *************
            }
        }


    }

---

移动tileItem指令的btnOnClick to link函数，并删除作用域：{}它将开始工作。并将

OK

更改为

OK

它正在按预期工作。由于

my tile item

指令有自己的独立作用域和自己的控制器，这并不意味着指令作用域将应用于该元素。当指令有自己的

模板

或

转包内容

时，指令的范围将通过元素编译。所以在这里，在

我的标题项

指令中，您没有它的

模板

，这就是为什么指令没有在它所承载的元素上应用指令范围

为了解决您的问题，您可以在从

my title item

指令生成内部模板后，使元素上的

myTileItemCtrl

范围可用。然后您可以考虑将< <代码>项>代码>作为范围绑定到<代码>我的标题项< /C> >从<代码>我的瓦片< /C> >指令>

<script type="text/ng-template" id="myTile.html">
    <div ng-repeat="tileItem in myTileCtrl.tiles" class="my-tile">
       <my-tile-item item="tileItem"></my-tile-item>
    </div>
</script>

我的项目指令

function myTileItem() {
    return {
        restrict: 'AE',
        scope: {
          item: '<'
        },
        template: `
          <div>{{item.id}}</div>
          <button ng-click="myTileItemCtrl.btnOKClick()">OK</button>
        `,
        //...
    }
}

函数myTileItem（）{
返回{
限制：“AE”，
范围：{
项目：“您有一些问题

我已更改了您的代码笔，现在它可以工作了：

第一个错误的修复可能是删除item指令中的隔离范围，只需删除item指令的block
scope
。
通过这种方式，item指令将访问父对象的范围，并可以通过添加新属性（作为函数）覆盖该范围

但这是错误的解决方案

遵循最佳方法，而不删除item指令中的孤立范围

function myTileItem() {
    return {
        restrict: 'AE',
        scope: {
          item: '<'
        },
        template: `
          <div>{{item.id}}</div>
          <button ng-click="myTileItemCtrl.btnOKClick()">OK</button>
        `,
        //...
    }
}

您没有为item指令定义模板。您应该为您试图实现的目标添加模板，因为如果隔离作用域，则控制器将只能在该指令的模板中访问，而看不到父指令的作用域。如果没有相应的模板，则无法在此调用该函数

在这些情况下，最好的办法是在item指令定义中提供一个scope参数，实际上就是item（我是通过双向数据绑定实现的，但是我不知道您要做什么，所以根据您的需求更改绑定）

通过这种方式，一切都会正常工作。
还没有找到解决方案，但部分问题是：您的
ng click
从未被考虑在内。我尝试了
ng click=“console.log（'test'）；myTileItemCtrl.btnOKClick（）”
而我什么都没有，而
onclick=“console.log（'test'）；myTileItemCtrl.btnOKClick（）
至少显示日志“test”（但函数似乎从未调用，也没有错误）
<script type="text/ng-template" id="myTile.html">
    <div ng-repeat="tileItem in myTileCtrl.tiles" class="my-tile">
       <my-tile-item item="tileItem"></my-tile-item>
    </div>
</script>

function myTileItem() {
    return {
        restrict: 'AE',
        scope: {
          item: '<'
        },
        template: `
          <div>{{item.id}}</div>
          <button ng-click="myTileItemCtrl.btnOKClick()">OK</button>
        `,
        //...
    }
}