Volta在ng-conf上谈到的新的依赖注入,包含在这里： https://github.com/angular/di.js正是我正在为我的AngularJS 1.3.0项目寻找的.

问题是,我不清楚我是否可以使用它.在github项目示例中,似乎没有使用AngularJS v1的例子.

我在Backbone项目中发现了一个例子：http://teropa.info/blog/2014/03/18/using-angular-2-0-dependency-injection-in-a-backbone-app.html,我发现在AngularJS v1项目中使用ES6的一个例子：https://github.com/mvolkmann/todo-es6/,但是我在Angular v1项目中找不到使用新的DI的例子.

我很困惑.任何指针？

也许不要使用di.js,而是将类似样式的代码转换成有效的角度1.X语法(在构建步骤中)

一个小例子和一个可能的开始：

var falafel = require('falafel');
var traceur = require('traceur');

var src =  
  '@Inject(MyService,MyOtherService)' +
  'class Thing{' +
  '  constructor(service,otherservice){' +
  '  }' +
  '}';

src = traceur.compile(src,{ annotations: true });
//console.log(src);

function tryGetPath(obj,path) {
  path.split('.').forEach(function(key) {
    obj = obj && obj[key];
  });
  return obj;
}

var output = falafel(src,function(node) {
  //find `Object.defineProperty for 'annotations'`
  if (node.type === 'CallExpression' && tryGetPath(node,'arguments.1.value') === 'annotations') {
    var injectable = tryGetPath(node,'arguments.0.name');
    var $inject = (tryGetPath(node,'arguments.2.properties.0.value.body.body.0.argument.elements') || [])
                       .filter(function(a){return a.callee.name === 'Inject'})  
                       .reduce(function(p,c){ p.push.apply(p,c.arguments); return p;},[])
                       .map(function(a){return "'"+a.name+"'";});
    node.update(injectable + '.$inject = [' + $inject.toString() + '];');
  }
});

console.log(output);

也许您甚至可以使用某些属性(例如@NgController等)将其注册到您的模块上作为控制器.

大多数Angular教程都讨论了使用Protractor进行端到端测试来测试编译模板是否按预期出现.我想知道是否有可能完成单元测试.

大多数关于在单元测试中引用HTML代码的教程都描述了在测试中编译自己编写的代码,例如,以确保正确访问指令：

describe('some function',function () {
  it('should do something',inject(function ($compile,$rootScope) {
    var element = $compile('<div id = "foo" ng-hide = "somecondition">Bar</div>')($Scope);
    $rootScope.digest();
    //Search for a given DOM element and perform some test here
  }));
});

但是,假设我想测试实际模板文件中的代码.就像我想测试ng-hide是否成功设置一样.我希望能够做到这样的事情：

describe('some function',function () {
    //Get the div with ID 'foo' in the compiled template
    var elm = $('#foo');
    expect(elm.css('display')).toEqual('none');
  });
});

当我这样做时,这不起作用. elm设置为一些HTML / Javascript代码,但不是模板的代码,elm.css(‘display’)返回未定义.

有没有办法用Jasmine / Angular设置单元测试？

使用 ng-html2js将HTML模板加载到Angular的$templateCache中,以便它们在您的测试中可用.

在测试中检索您的特定模板：

var template = $templateCache.get('my/template.html');

将模板包装在更容易使用的jqLit​​e / jQuery对象中：

var element = angular.element(template);

然后,您可以选择模板中的元素：

var fooEl = element.find('#foo');

对于断言,您不想测试该显示：在元素上设置none,即测试ng-hide的内部实现.您可以相信Angular团队有自己的测试,涵盖设置CSS属性.相反,您要测试您是否正确编写了模板,因此更适合测试元素上是否存在ng-hide属性,并且它提供了正确的scope属性以绑定到：

expect(fooEl.attr('ng-hide')).toBe('isFooElHidden');

我在页面上有一个角度元素,需要与其他非角度页面元素进行通信.

我正在创建指令元素,并将其附加到其目标div.我试图传递该创建的指令一个对象(ajax对象),它只包含属性.

问题是我无法弄清楚如何将这个ajax对象传递给指令,因为$compile需要一个范围.当http结束,并且因为我必须在指令中使用=时,指令被覆盖.

请看我的插件：https://plnkr.co/edit/brTWgUWTotI44tECZXlQ(抱歉图像).点击< button>触发指令.

(function() {
'use strict';
var CHANNEL = 'podoverlay';
angular.module('CavernUI',[])
  .controller('CavernCtrl',function($scope,getItemService) {

    $scope.model = {};
    var _pods = $scope.model.pods = {};

    function getData(selector) {
      $(selector).each(function(i,pod) {
        _pods[+pod.dataset.item] = {
          $: $(pod)
        };
      });

      Object.keys($scope.model.pods).map(function(key) {
        getItemService.getItem(key).success(function(response) {
          _pods[key] = angular.extend(_pods[key],response);
          $scope.$broadcast(CHANNEL,_pods[key],$scope);
        });
      })
    }

    $scope.runPodCheck = function(selector) {
      getData(selector);
    }
  })
  .directive('podchecker',function($compile) {

     var createOverlay = function(e,data,scope){
         scope.data = data;
         // can i just pass data rather than scope.data?
         // If I pass the scope,then when another $broadcast happens
         // the scope updates,wiping out the last scope change.
         // Scope here really needs to be a static object that's
         // created purely for the hand off. But I don't kNow if 
         // that can be done.
         angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope));
     }

    return {
      restrict: 'E',scope: {
        check: '&',},templateUrl: 'tpl.html',link: function(scope,elm,attr){
         scope.$on(CHANNEL,createOverlay);
      }
    };
  })
  .directive('overlay',function() {
    return {
      restrict: 'E',scope: {
        o: '=data' // here is the problem. 
      },template: '<div><a href="{{o.url}}"><img ng-src="{{o.images.IT[0]}}"/></a></div>',attr) {

      }
    }
  })
  .service('getItemService',['$http',function($http) {
    this.getItem = function(itemId) {
      return $http({
        method: 'GET',url: 'https://www.aussiebum.com/ajaxproc/item',params: {
          id: itemId,ajxop: 1
        },});
    };
  }]);
}());

编辑：
预期产量：

我不确定这是最好的方法,但一种方法可能是为每个叠加层手动创建一个新的范围.

所以改变了这个：

var createOverlay = function(e,scope){
           scope.data = data;
           angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(scope));
       }

对此：

var createOverlay = function(e,scope){
           var overlayScope = scope.$new(false); // use true here for isolate scope,false to inherit from parent
           overlayScope.data = data;
           angular.element(data.$[0]).empty().append($compile('<overlay data="data"></overlay>')(overlayScope));
       }

更新了Plnkr：https://plnkr.co/edit/wBQ1cqVKfSqwqf04SnPP

有关更多信息$new()

干杯!