//index.js
angular.module(''myApp'',[]);
myApp.directive(''myDirective'',function() {return {};});

//index.js
angular.module(''myApp'',[])
.directive(''myDirective'',function() {
  return {
    restrict: ''AE'',
    priority: 1,
    template: ''<div>hello world</div>''
  };
})
.directive(''myDirective1'',function() {
  return {
    restrict: ''AE'',
    priority: 3,
    terminal: true
  };
})

<!-- index.html -->
<div my-directive my-directive1></div>

//index.js
angular.module(''myApp'',[])
.directive(''myDirective'',function() {
  return {
    restrict: ''A'',
    template: ''<div>hello world</div>'',
    replace: true/false
  };  
}) 

 <!-- index.html -->
<my-directive></my-directive>

<!-- index.html -->
<div my-directive>world</div>

//index.js
angular.module(''myApp'',[])
.dirctive(''myDirective'',function() {
  return {
    restrict: ''EA'', 
    transclude: true,
    template: ''<div>hello <span ng-transclude></span></div>''
  };
})

code：这里columnDefs将被绑定到http服务方法,它将调用mvc controll动作并绑定response.I我想现在添加新列.每行都有按钮.是否有任何绑定数组到columnDefs的字段：

$scope.gridOptions = {
            enableColumnsResize: true,enableSorting: false,enableFiltering: false,autoResize: true,enableFocusedCellEdit: true,enableCellSelection: true,enableCellEditOnFocus: true,enableColumnMenus: false,columnDefs: [

            ],data:$scope.swap,onRegisterapi: function (gridApi) {
                $scope.grid1Api = gridApi;
            }

        };
$http.get('/Default1/GetJsonData')
            .success(function (result) {
                $scope.swap = result;
                $scope.gridOptions.push({name:'newcol',filter:'newcolarray'})

                $scope.gridOptions.data = $scope.swap;
                console.log(result);
            })
            .error(function (data) {
                console.log(data);
            });

$scope.gridOptions.columnDefs.push({name: 'newCol',displayName: 'My new col'});

依此类推,在设置$scope.gridOptions.data之前,每列调用一次

为了举例说明,我将编写一些示例代码.

页面中的HTML：

<div>
  <full-width></full-width>
</div>

然后该指令将fullWidth指令替换为：

<div>
  <div ng-transclude=""></div>
</div>

并为元素指定边距,如下所示：

var sideOffset = element[0].offsetLeft*-1;

element.css('margin-left',sideOffset+'px')
element.css('margin-right',sideOffset+'px')

现在,该指令完全正常,但当我尝试使用以下方法测试偏移：

describe('Directive: fullWidth',function () {

  beforeEach(module('myApp'))

  var element,scope

  beforeEach(inject(function ($rootScope) {
    scope = $rootScope.$new()
  }))

  it('should have the same right and left margin',inject(function ($compile) {
    element = angular.element('<tt-full-width-section></tt-full-width-section>');
    element = $compile(element)(scope)

    var leftMargin = element.css('margin-left')
    console.log(leftMargin)
    console.log(element)
  }))
})

我得到一个不错的0px.还检查记录的元素[0] .offsetLeft得到0.

我怎么能(如果可能的话)告诉Karma(Jasmine？)渲染div以便我可以检查偏移？

基于daveoncode建议,我对测试进行了一些更改,我们正在改进.
但是,该指令似乎在测试中不起作用.
我仍然得到0px作为margin-left而265px的offsetLeft

it('should have the same right and left margin',inject(function ($compile) {
  element = angular.element(
      '  <div>' +
      '    <full-width></full-width>' +
      '  </div>'
  );
  element = $compile(element)(scope)
  angular.element(document).find('body').append(element);

  var el2 = element.find('div')

  var leftMargin = el2.css('margin-left')
  var rightMargin = el2.css('margin-right')
  console.log(leftMargin,el2)
}

CSS样式在添加到DOM之前不会应用于元素！这不是与业力,角度,茉莉或其他相关的问题……这就是浏览器引擎的工作原理！浏览器解析CSS定义并根据它呈现页面中的元素,但在角度测试中,您编写：

var element = angular.element('<my-directive></my-directive>');
$compile(element)(scope);

您正在处理内存中的DOM节点,除了您的JavaScript代码之外,它们都是未知的！浏览器引擎应该如何将CSS应用于生活在js变量中的内存节点？它显然不能……它只能遍历页面中的节点树,所以……“修复”非常简单：你必须将元素添加到DOM：

angular.element(document).find('body').append(element);

提示2：

好吧,我认为现在你的问题实际上是另一个,你正在使用jQlite .css()实现,这与jQuery不同,它不会检索计算的样式而只是内联的(因此我担心不能“将“自动转换为实际的像素数！”…尝试使用此片段检索剩余的计算边距：

window.getComputedStyle(element,null).marginLeft

(getComputedStyle应该适用于IE以外的每个浏览器,所以如果你使用PhantomJS进行测试就可以了)