小编Gio*_*nso的帖子

我有两个 div，一个“容器”和一个“内容”。如果内容在容器内，则适合容器。

#container {
    display:block;
    width:300px;
    margin:auto;
    background:green;
}
#content {
    display:block;
    margin:20px; /* HERE IS THE ERROR */
    background:yellow;
}

顶部和底部边距不在父级内部，但左侧和右侧位于父级内部。

为什么会出现这种情况？

编辑： JSFIDDLE示例：

我有一个基于twitter bootstrap的表单,每个字段都有自己的配置

// controller (the template shows this in ng-repeat

$scope.fields = [{name:"f1", label:"Field 1", with_button: false},
                 {name:"f2", label:"Field 2", with_button: true}]

我正在尝试制作一个"条件指令",根据"field.with_button"自定义模板

// Without button
<div class="controls">
    <input type="text" id="i_{{field.name}}">
</div>

// With button
<div class="controls">
    <div class="input-append">
        <input type="text" id="i_{{field.name}}">
        <span class="add-on">bt</span>
    </div>
</div>

我搜索了很多,没有找到任何解决方案,我试图只创建一个div并将内容放入编译器函数但它没有解析,如果我称之为$apply崩溃.

我怎么能做这个指令？

错了我上次尝试:

angular.module('mymodule',[]).directive('ssField', function() {
    return {
        transclude:false,
        scope: {
            field: '='
        },
        restrict: 'E',
        replace:true,
        template: '<div class="controls">{{innerContent}}</div>',
        controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
            $scope.$eval('$scope.innerContent = \'<input …