Question

我仍然是指令的新手，所以无法完全理解它是如何工作的，希望有人能够帮助我在用户点击ng-repeat上的项目时将范围变量传递给指令。

代码看起来像这样

HTML

<tr ng-repeat='item in loadSummaries.items' ng-animate="{enter: 'animate-enter', leave: 'animate-leave'}">
    <td>{{item.ShipmentId}}</td>
    <td><button ng-click="showDetails(item)">details</button></td>
</tr>

指令被注入如下

<div id="searchRoot" class="embed-edit-item-form">
<div id="content-outer" class="row">
    <div id="form-holder">
        <div id="edit-form-content">
            <div id="edit-form-content-inner" style="background-color: transparent">
                <div ng-include src="'Client/Views/Shipper/shipment_details.html'">
                </div>
            </div>
            <div class="clear" style="clear: both">
            </div>
        </div>
    </div>
</div>

控制器

$scope.showDetails = function (item) {
    $scope.Message = "Details Clicked";
    $scope.$broadcast('event:show-edit-form', item);
}

和指令。 编辑2

app.directive('embedEditItemForm', function () {
return {
    restrict: 'C',
    template: "<div></div>",
    transclude: true, //use transclusion
    scope: {},
    link: function (scope, elem, attrs, controller, linker) {
        linker(scope, function (clone) { //bind the content inside 
            elem.children().eq(0).append(clone); // add content to DOM

            var bidHolder = elem.find('#form-holder');
            var searchResult = elem.find('#searchResult');
            bidHolder.hide();
            scope.$on('event:show-edit-form', function (item) {
                scope.Shipment = item;
                searchResult.hide();
                bidHolder.slideDown('slow', function () {
                });
            });
            scope.$on('event:close-edit-form', function () {
                searchResult.show();
                bidHolder.slideUp();
            });
        });
    }
}

}）;

我遇到的问题是如何将项目从ng-repeat传递到'shipment_details.html'，以便我可以在那里显示更多详细信息。指令scope.Shipment = item;中的代码无效。

编辑1 完整的部分页面如下：

<div id="searchRoot" class="embed-edit-item-form">
<div id="content-outer" class="row">
    <div id="form-holder">
        <div id="edit-form-content">
            <div id="edit-form-content-inner" style="background-color: transparent">
                <div ng-include src="'Client/Views/Shipper/shipment_details.html'">
                </div>
            </div>
            <div class="clear" style="clear: both">
            </div>
        </div>
    </div>
</div>
<div id="searchResult">
    <div infinite-scroll='loadSummaries.nextPage()' infinite-scroll-disabled='loadSummaries.busy' infinite-scroll-distance='1'>

        <table class="table">
            <thead>
                <tr>
                    <th>Shipment ID</th>
                    <th</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat='item in loadSummaries.items'>
                    <td>{{item.LoadId}}</td>
                    <td><button ng-click="showDetails(item)">details</button></td>
                </tr>
            </tbody>
        </table>
        <div ng-show='loadSummaries.busy'>Loading data...</div>
    </div>
</div>

此致基兰

Answer 1

正如文档中所述：

在典型的设置中，窗口小部件创建了一个隔离范围，但是 transclusion不是孩子，而是隔离范围的兄弟。这个使得窗口小部件可以具有私有状态，以及转换为绑定到父（预隔离）范围。

您的内容需要继承您指令的范围才能发挥作用。在这种情况下，一个简单的解决方案是通过删除scope:{}来避免使用隔离范围。

我想指出为什么这是角度的预期行为。被抄送的内容是任意的，因此不应该了解您的指令的实现细节（可以使用的内容）。

如果您认为转换后的内容属于指令，则将其作为指令模板的一部分更有意义（不要使用转换）。

了解更多信息：

Transclusion and scopes in angular: Why is this not working?

Why ng-transclude's scope is not a child of its directive's scope - if the directive has an isolated scope?

Confused about Angularjs transcluded and isolate scopes & bindings

Angularjs指令更改范围变量

1 个答案: