Question

我有一个指令，在调用时会传入controller和array。

在我传入的控制器中，有一个我想要循环的对象。

我的HTML看起来像这样：

<div class="row">

    <div class="col-md-6">

        <div class="jumbotron" ng-controller="protocolCtrl as pctrl">

            <button type="button" id="protocol" class="btn btn-primary btn-lg" ng-click="pctrl.getUpdatedList()"
                        data-toggle="modal" data-target="#modal">Modify Current Protocols</button>


            <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

            <modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

        </div>

    </div>


    <div class="col-md-6">

        <div class="jumbotron" ng-controller="categoryCtrl as cctrl">   
            <button type="button" id="category" class="btn btn-primary btn-lg" ng-click="cctrl.getUpdatedList()"
                        data-toggle="modal" data-target="#modal">Modify Current Categories</button>


            <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->

            <modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>

        </div>

    </div>

</div>

我的问题是无论我做什么，无论我按什么按钮，它都会在html中显示 FIRST 指令。

我的directive看起来像这样：

.directive('modalDirective', function(){
    return {
        restrict: 'E',
        templateUrl: '/directives/modal-directive.html',
        scope: {
            list: '=',
            headers: '='
        },
        link: function(scope, element, attrs){

            console.log(attrs.list + ' | ' + attrs.headers);
        }
    };
});

我的modal-directive.html看起来像这样：

<table class="table table-striped">
    <thead>

      <tr>
        <th ng-repeat="h in headers"> {{ h }} </th>
      </tr>

    </thead>

    <tbody>

       <!-- Loop through -->

      <tr ng-repeat="l in list.list">

            <!--Access the actual values inside each of the objects in the array-->

            <td ng-repeat="data in l"> {{ data }} </td>

            <td>
                <button type="button" class="btn btn-primary btn-sm"
                     data-toggle="modal">Edit</button>
            </td>

            <td>
                    <button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
                        data-dismiss="modal">Remove</button>
            </td>

      </tr>

    </tbody>

</table>

我使用隔离范围是错误的，还是我需要更改其他内容以使其工作？

更新

这是一个fiddle，用于演示此问题。

无论我点击哪个按钮，它都会在模态体中显示相同的文字。

Answer 1

请检查此JSFiddle。

原因是data-target值指向模态的DOM元素id。如果您在指令模板中修复了此ID，则单击该按钮将始终启动标识为modal的模式。因此，您需要将modalId作为指令的另一个参数。

顺便说一句，您可以将控制器传递给指令。就像这个JSFiddle：

angular.module('Joy', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    this.value = 'Joy';
}])
    .directive('passMeContrller', [function () {
    return {
        restrict: 'A',
        scope: {
            ctrl: '=',
        },
        template: '<div>Value: {{ctrl.value}}</div>'
    };
}]);

HTML：

<div ng-app="Joy" ng-controller="MyCtrl as c">
    <div pass-me-contrller ctrl="c"></div>
    <hr>
    <div ng-bind="c.value"></div>
</div>

因为控制器本身只是一个JavaScript对象。

提醒您：您使用的是protocolCtrl as pctrl，因此您需要指定this.list=...。

If you want to pass in a function to the isolated scope, use &

但是，我建议不要将整个controller传递给指令。 controller旨在：

设置$ scope对象的初始状态。
向$ scope对象添加行为。

控制器不应该被重用。通常$scope上有许多属性，而传递给指令的其中一些属性不会被它使用。

Answer 2

你真的不需要两个控制器和两个指令来实现这一目标。以下是如何执行此操作的示例。注意我将控制器移动到行而不是每列都有单独的控制器。控制器myCtrl现在使用ng-click属性处理绑定到按钮的单击函数。然后通过调用各自的函数来确定应该放置哪个文本。 IE proto()和cat()

现在，根据您对应用程序架构的规划，这可能不适合您的情况。但就你所提供的内容而言，它适用于你当前的问题。

<强> HTML

<body ng-app="TM">
    <div class="row" ng-controller="myCtrl as modalControl">
        <div class="col-md-6">
            <div class="jumbotron" >
                <button 
                    ng-click='proto()'
                    type="button" id="protocol" 
                    class="btn btn-primary btn-lg" 
                    data-toggle="modal" 
                    data-target="#modal">Modify Current Protocols
                </button>
            </div>
        </div>
        <div class="col-md-6">
            <div class="jumbotron">   
                <button
                    ng-click='cat()'
                    type="button" 
                    id="category" 
                    class="btn btn-primary btn-lg" 
                    data-toggle="modal" 
                    data-target="#modal">Modify Current Categories
                </button>
            </div>
        </div>
        <!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
        <modal-directive ctrl="modalControl"></modal-directive>
    </div>
</body>

Angular JS

angular.module('TM', [])

.controller('myCtrl', function($scope){

    $scope.text ='default';

    $scope.proto = function() {
        this.text = 'Now looking at the protocol part'
    }
    $scope.cat = function() {
        this.text = 'Now looking at the category part'
    }
})
.directive('modalDirective', function(){
    return {
        restrict: 'E',
        scope: true,       
        template:  ['<div id="modal" class="modal fade" role="dialog">', 
                      '<div class="modal-dialog">',
                        '<div class="modal-content">',
                        '<div class="modal-header">',
                        '<h4 class="modal-title">Modal Header</h4>',
                        '</div>',
                        '<div class="modal-body">',
                        '<p> {{ text }} </p>',
                        '</div>',
                        '<div class="modal-footer">',
                        '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
                        '</div>',
                        '</div>', 
                        '</div>',
                        '</div>'].join('')
    }
});

<强>演示：

https://jsfiddle.net/DTcHh/10193/

<强>更新

好的，我又看了一眼。即使上面的例子有效。我注意到我有一些额外的东西，我不一定需要。例如，myCtrl as modalControl不需要as modalControl部分。以下是更新的示例。我用一些不同的简化标记做了这个。

<强> HTML：

<body ng-app="TestApp">
    <div ng-controller="myCtrl">
        <button ng-click="one()">One</button>
        <button ng-click="two()">Two</button>
        <test-directive></test-directive>
    </div>    
</body>

角度示例（没有隔离范围）

angular.module('TestApp', [])
.controller('myCtrl', function($scope){

    $scope.text ='default';

    $scope.one = function() {
        this.text = 'this is one'
    }
    $scope.two = function() {
        this.text = 'this is two'
    }
})
.directive('testDirective', function(){
    return {
        template: "<div id='test'>{{text}}</div>"  
    }
});

演示2：

https://jsfiddle.net/krishollenbeck/v8tczaea/12/

请注意..

restrict: 'E',
scope: true

也不需要，因为我在这个例子中没有使用隔离范围。更多信息https://docs.angularjs.org/guide/directive

Angular，在单击函数之间共享指令模板

2 个答案:

<强>更新