2
演示:http://jsfiddle.net/sunnycpp/MPACc/4/Form-inline元素之間爲什麼沒有空間?
相同的代碼複製粘貼此: HTML
<div class="container">
<debug-bar ng-controller="parentController">
<debug-bar ng-controller="childController">
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
<debug-bar ng-controller="oneMoreChildController"></debug-bar>
</debug-bar>
</div>
的Javascript
var angModule = angular.module('components', []);
angModule.directive('debugBar', function() {
return {
restrict: 'E',
template:
'<div>'+
'<form class="form-inline">' +
'<input type="text" class="input-small" ng-model="myText"/>' +
'<button class="btn btn-primary">Broadcast</button>' +
'<button class="btn btn-primary">Emit</button>' +
'</form>' +
'<div ng-transclude></div>'+
'</div>',
transclude: true,
replace: true
};
});
function createController(myText) {
return function ($scope) {
$scope.myText = myText;
$scope.$on("event", function (senderText) {
console.log("Event received in:" + $scope.myText + " from Sender:" + senderText);
});
$scope.$broadCastEvent = function() {
$scope.$broadcast("event", $scope.myText);
console.log("Sent event from:" + $scope.myText);
};
};
}
angModule.controller("parentController", createController("In parent"));
angModule.controller("childController", createController("in FirstChild"));
angModule.controller("oneMoreChildController", createController("in oneMoreChildController"));
angModule.controller("oneMoreChildController", createController("in secondLevelChild"));
那麼,爲什麼它工作在這種情況下,HTTP:/ /jsfiddle.net/sunnycpp/MPACc/12/? – SunnyShah
@Sunny做到了嗎? http://jsfiddle.net/MPACc/13/ - 您在示例中看到的空間是內聯元素之間的換行符。沒有換行符,元素之間沒有空格。您需要手動設置邊距才能獲得一致的行爲。 – Christoph
哦!好。非常感謝你澄清我的疑惑。 – SunnyShah