点击时调用指令答案

【问题标题】：Calling a directive on click点击时调用指令
【发布时间】：2015-10-08 23:16:16
【问题描述】：

首先我想为我的英语道歉，但我会尽量具体。

其次，解决方案可能很简单，但我卡住了，我的大脑不想合作，啤酒也无济于事..至少这次

所以我以 Angular 编写应用程序，在其中显示带有 ng 重复的一些数据表，并且在每一行中我需要有编辑、删除等按钮，对于每个按钮，我在指令中定义了不同的模态部分。

还有一个问题，因为当我加载视图时，ng-repeat 会为带有模板的指令的每一行添加指令，但是当我点击行中的特定按钮时我想调用指令，而不是加载视图时的所有行

    <h4 class="modal-title">Name for: {{name}}</h4>

<add-button></add-button>

<table class="table table-hover">
    <thead>
    <tr>
        <input type="search" placeholder="search" ng-model="findThisData">
        <td>Id</td>
        <td>Name</td>
    </tr>
    </thead>
    <tr ng-repeat="data in DataOne | filter:findDataOne | orderBy: 'id'">

        <td>{{data.id}}</td>

        <td ng-model="data.name">{{data.name}}</td>

        <td>
       **strong text**

            <edit-input></edit-input>
            <delete-button></delete-button>
        </td>
    </tr>
</table>

EditButton 部分：

    <button class="btn btn-success" type="button" data-toggle="modal" data-target=".bs"
        ng-click="modalContent(data.id, $index)" >Edytuj{{data.name}}
</button>
<div  class="modal fade bs" role="dialog" id="yolo">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">Edycja{{data.version}}</h4>
            </div>
            <div class="modal-body">
                <input type="text" ng-model="input.name"/>
            </div>
            <div class="modal-footer">
                <button class="btn btn-danger" ng-click="save(input.name)" data-dismiss="modal">Zapisz</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Zamknij</button>
            </div>
        </div>
    </div>
</div>

指令：

    define(['angular'], function () {
    'use strict';
    var dataDirectives = angular.module('dataModule.dataDirectives', []);

    dataDirectives.directive('dataName', function(){
        return{
            restrict: 'AE',
            templateUrl: '/front/app/views/users/dataName.html'
        }
    });


    dataDirectives.directive('editInput', function (){
        return{
            restrict: 'AE',
            templateUrl: '/front/app/views/partials/editInput.html'

        }
    });

    dataDirectives.directive('modalName', function () {
        return{
            restrict: 'AE',
            templateUrl: '/front/app/views/partials/modalname.html'
        }
    });
    dataDirectives.directive('deleteButton', function () {
        return{
            restrict: 'AE',
            templateUrl: '/front/app/views/partials/deleteButton.html'
        }
    });
   dataDirectives.directive('addButton', function (){
        return {
            restrict: 'AE',
            templateUrl: '/front/app/views/partials/addButton.html'
        }
    });
});

所以我的目标是在表格的每一行中都有一个编辑和删除按钮，当我点击这个按钮时，我想用模态模板调用操作，但只针对行中的这个特定数据

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

你可以为你的指令添加一个输入变量并像这样使用它们：

<edit-input rowId="data.id"></edit-input>
<delete-button rowId="data.id"></delete-button>

您可以通过在指令中使用隔离范围来实现。以下是一些有用的链接，解释了如何做到这一点：

【讨论】：