Angularjs指令更改范围变量

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 不是child，而是isolate scope 的兄弟。这 使小部件可以拥有私有状态，并且 嵌入要绑定到父（预隔离）范围。

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

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

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

更多信息：

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