0

我想通過ng-transclude將指令的屬性值傳遞給子指令的作用域。我已經嘗試使用=,@,&作爲範圍綁定,但是我仍然很驚訝。我希望子指令繼承父指令的屬性。任何幫助,將不勝感激!如何通過transclude將父指令屬性值傳遞給子指令作用域?

我在這裏已經做了的jsfiddle - >https://jsfiddle.net/egdfLzLj/5/

的Javascript

var app = angular.module('app', []); 

app.directive('parent', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { 
     label: '@' 
    }, 
    template: '<section>' + 
      '<label>{{::label}}' + 
      '<ng-transclude></ng-transclude>' + 
      '</label>' + 
     '</section>' 
    }; 
}); 

app.directive('child', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     type: '@', 
     label: '&' 
    }, 
    template: '<input ng-type="type" ng-value="::label">' 
    }; 
}); 

的Html

<parent label="Parent Label"> 
    <child type="text"></child> 
</parent> 

回答

1

演示:https://jsfiddle.net/egdfLzLj/2/

HTML

<parent label="Parent Label"> 
    <child type="text"></child> 
</parent> 

指令

var app = angular.module('app', []); 

app.directive('parent', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    replace: true, 
    scope: { 
     label: '@' 
    }, 
    template: '<section>' + 
      '<label>{{::label}}' + 
      '<ng-transclude></ng-transclude>' + 
      '</label>' + 
     '</section>' 
    }; 
}) 

app.directive('child', function() { 
    return { 
    restrict: 'E', 
    replace: true, 
    link: function (scope) {scope.label = scope.$parent.label;}, 
    template: '<input type="text" value="{{ label }}">' 
    }; 
}); 
+0

這不是我想要做的事。我試圖避免必須將標籤添加到子元素。我希望它繼承父項的屬性。我把jsfiddle放在了我期待的東西上。 – jemiloii

+0

好吧。 Plz查看最新的答案。 – softvar

+0

@softvar我也試圖用require鍵來獲得te父項的值,但它不起作用。未找到父級,因此無法在鏈接功能中使用額外的參數。爲什麼?是否因爲父母跨越? – Michelangelo

相關問題