AngularJS：指令和transcluded指令之間的作用域訪問

我構建了一個模塊化表單的小型演示，其中包含單獨的輸入指令。它還具有綁定到相同控制器和範圍的表單值的預覽。AngularJS：指令和transcluded指令之間的作用域訪問

輸入指令導致的問題是在表單內transcluded輸入：

<mailer-form> 
    <mailer-input form="mail" model="email"> 
    <input class="form-control" placeholder="Email" ng-model="mail.email"> 
    </mailer-input> 
</mailer-form> 

<mailer-preview></mailer-preview>

你可以在它到這裏看看：

http://plnkr.co/edit/0FuzfOFFDN5XcNyZcpBv

的問題是，NG-表單模板中的模型更新父範圍，而橫切輸入不包含。這就是爲什麼第一個電子郵件輸入不起作用和其他的。

我該如何使兩個方向的綁定指令綁定？

謝謝！

來源

2014-07-15 BarakChamo

，所以這個問題你看到的電子郵件輸入兩次？我理解對嗎？這就是我所看到的全部錯誤 – Ronnie

ng-transclude指令總是爲transcluded內容創建一個新的子作用域。

這裏有一個請求（https://github.com/angular/angular.js/issues/5489）不創建新的作用域，但它尚未實現。

如果您希望跨越的內容與容器具有相同的範圍，則可以在鏈接（）中使用transcludeFn而不是ng-transclude，如下面的片段所示。

link: function(scope, element, attributes, controllers, transcludeFn){ 
    transcludeFn(scope, function(nodes) { 
    element.find('.transclude-here').append(nodes); 
    }) 
}

，並取代那些

<div ng-transclude></div>

與

<div class="transclude-here"></div>

有關完整示例，請參見http://plnkr.co/edit/WYCOxC9xBIOTUWPs2iAq?p=preview

編輯：，如果你想在多個地方這種行爲，你可以編寫你自己的定製版本NG-transclude這樣的：

app.directive('myTransclude', function() { 
    return { 
    restrict: 'EAC', 
    link: function(scope, element, attrs, controllers, transcludeFn) { 
     transcludeFn(scope, function(nodes) { 
     element.empty(); 
     element.append(nodes); 
     }); 
    } 
    }; 
});

和HTML模板：

<div my-transclude></div>

來源

2014-07-15 17:42:14 runTarm

感謝您使用transtrart runTarm來闡明範圍情況。 transclusion指令看起來像一個可靠的方式來將其構建爲可重用組件。 – BarakChamo

AngularJS：指令和transcluded指令之間的作用域訪問

回答

相關問題