Angular，在点击函数之间共享指令模板 [英] Angular, share directive template between click functions

查看：26
本文介绍了Angular，在点击函数之间共享指令模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个指令，当被调用时，它传入一个 controller 和一个 array.

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

我的 html 看起来像这样:

<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">修改当前协议</button><!--在此模式中，您可以添加/更改/删除数据--><modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>

<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">修改当前类别</button><!--在此模式中，您可以添加/更改/删除数据--><modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>

我的问题是，无论我做什么，总是显示 html 中的 FIRST 指令，无论我按下什么按钮.

我的指令如下所示:

.directive('modalDirective', function(){返回 {限制:'E'，templateUrl: '/directives/modal-directive.html',范围: {列表:'='，标题:'='},链接:功能(范围，元素，属性){console.log(attrs.list + ' | ' + attrs.headers);}};});

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

<头><tr><th ng-repeat="h in headers">{{ h }} </th></tr></thead><!-- 循环遍历--><tr ng-repeat="l in list.list"><!--访问数组中每个对象内的实际值--><td ng-repeat="l 中的数据">{{ 数据 }} </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>

我是否使用了独立的范围错误，还是我需要更改其他内容才能使其正常工作?

更新

这是一个 fiddle，演示了这个问题.

无论我点击哪个按钮，它都会在模态正文中显示相同的文本.

解决方案

您实际上并不需要两个控制器和两个指令来实现这一点.下面是如何执行此操作的示例.请注意，我将控制器移到了行上，而不是为每一列设置单独的控制器.控制器 myCtrl 现在处理使用 ng-click 属性绑定到按钮的点击功能.然后通过调用相应的函数来确定应将哪个文本放置在何处.IE proto() 和 cat()

现在这可能不适合您的情况，具体取决于您如何规划应用程序架构.但就您提供的内容而言，它适用于您当前的问题.

HTML

<div class="row" ng-controller="myCtrl as modalControl"><div class="col-md-6"><div class="jumbotron" ><按钮ng-click='proto()'类型="按钮" id="协议"class="btn btn-primary btn-lg"数据切换=模态"data-target="#modal">修改当前协议

<div class="col-md-6"><div class="jumbotron"><按钮ng-click='猫()'类型=按钮"id="类别"class="btn btn-primary btn-lg"数据切换=模态"data-target="#modal">修改当前分类

<!--在此模式中，您可以添加/更改/删除数据--><modal-directive ctrl="modalControl"></modal-directive>

Angular JS

angular.module('TM', []).controller('myCtrl', function($scope){$scope.text ='默认';$scope.proto = function() {this.text = '现在看协议部分'}$scope.cat = function() {this.text = '现在看类别部分'}}).directive('modalDirective', function(){返回 {限制:'E'，范围:真实，模板:['<div id="modal" class="modalfade" role="dialog">','
','
','
','<h4 class="modal-title">模态标题</h4>','</div>','
','<p>{{ text }} </p>','</div>','
','<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>','</div>','</div>','</div>','</div>'].join('')}});

演示:

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

更新:

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

HTML:

<div ng-controller="myCtrl"><button ng-click="one()">一个</button><button ng-click="two()">两个</button><测试指令></测试指令>

Angular 示例(无独立作用域)

angular.module('TestApp', []).controller('myCtrl', function($scope){$scope.text ='默认';$scope.one = function() {this.text = '这是一个'}$scope.two = function() {this.text = '这是两个'}}).directive('testDirective', function(){返回 {模板:<div id='test'>{{text}}</div>"}});

演示 2:

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

注意这一点..

限制:'E'，范围:真实

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

I have a directive which, when called, passes in a controller and an array.

In the controller I pass in, there is an object I want to loop over.

my html looks like this:

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

My problem is that no matter what I do, it's always the FIRST directive in the html that showes up, no matter what button I press.

My directive looks like this:

.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);
        }
    };
});

My modal-directive.html looks like this:

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

Am I using isolated scopes wrong, or is it something else I need to change in order to make this work?

Update

Here is a fiddle, that demonstrates the problem.

No matter which button i click, it displays the same text in the modal body.

解决方案

You don't really need two controllers and two directives to achieve this. Below is an example of how you can do this. Notice I moved the controller to the row instead of having separate controllers for each column. The controller myCtrl now handles the click functions which are bound to the buttons using the ng-click attribute. This then determines the which text should be placed where by calling there respective functions. IE proto() and cat()

Now this may not be ideal for your situation depending on how you plan on the architecture of your application. But it works for your current problem in terms of what you have provided.

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('')
    }
});

Demo:

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

UPDATE:

Okay, I took another look. And even though the above example works. I noticed that I have a few extra things that I didn't necessarily need. For example myCtrl as modalControl doesn't need the as modalControl part. Below is an updated example. I did this one with some different simplified markup.

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 Example (without Isolated Scope)

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>"  
    }
});

Demo 2:

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

Note this..

restrict: 'E',
scope: true

Was also not needed because I am not using Isolated scope in this example. More info here https://docs.angularjs.org/guide/directive

这篇关于Angular，在点击函数之间共享指令模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆