Javascript 指令链接中的绑定不起作用

我试图使一个简单的指令工作，它将简单地返回大写文本。文本通过绑定从控制器传递

基本思想是：

<div ng-controller="MainCtrl as main">

    <div uppercase>{{main.message}}</div>

</div>

{{main.message}

我的主要JS文件如下：

angular.module('app', [])

.controller('MainCtrl', function(){
    this.message = 'hello world'
})

.directive('uppercase', function() {
    return {
        restrict: 'A',
        transclude: true,
        template: '<span ng-transclude></span>',
        link: function(scope, el, attr) {
            el.text() = el.text().toUpperCase();
        }
    }
})

describe("App", function() {

    var $compile
    ,   $rootScope
    ,   $controller
    ,   MainCtrl
    ,   element;

  beforeEach(module('app'))

  beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){

    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;

    MainCtrl = $controller('MainCtrl');



  }))

  describe("MainCtrl", function() {
    it("should have a message property", function() {
      expect(MainCtrl.message).toBe('hello world');
    });
  });

  describe("Uppercase directive", function() {
    it("should return uppercase text", function() {      

      element = '<p superman>{{MainCtrl.message}}</p>';

      element = $compile(element)($rootScope);

      $rootScope.$digest();

      expect(element.text()).toBe('HELLO WORLD');
    });
  });


});

angular.module（'app'，[]）
.controller（'MainCtrl'，function（）{
this.message='hello world'
})
.directive（'大写'，function（））{
返回{
限制：“A”，
是的，
模板：“”，
链接：功能（范围、el、属性）{
el.text（）=el.text（）.toUpperCase（）；
}
}
})

另外，我的茉莉花测试如下：

angular.module('app', [])

.controller('MainCtrl', function(){
    this.message = 'hello world'
})

.directive('uppercase', function() {
    return {
        restrict: 'A',
        transclude: true,
        template: '<span ng-transclude></span>',
        link: function(scope, el, attr) {
            el.text() = el.text().toUpperCase();
        }
    }
})

describe("App", function() {

    var $compile
    ,   $rootScope
    ,   $controller
    ,   MainCtrl
    ,   element;

  beforeEach(module('app'))

  beforeEach(inject(function(_$compile_, _$rootScope_, _$controller_){

    $compile = _$compile_;
    $rootScope = _$rootScope_;
    $controller = _$controller_;

    MainCtrl = $controller('MainCtrl');



  }))

  describe("MainCtrl", function() {
    it("should have a message property", function() {
      expect(MainCtrl.message).toBe('hello world');
    });
  });

  describe("Uppercase directive", function() {
    it("should return uppercase text", function() {      

      element = '<p superman>{{MainCtrl.message}}</p>';

      element = $compile(element)($rootScope);

      $rootScope.$digest();

      expect(element.text()).toBe('HELLO WORLD');
    });
  });


});

描述（“应用程序”，函数（）{
var$compile
，$rootScope
，$controller
，MainCtrl
，元素；
每个之前（模块（“应用程序”））
beforeach（注入函数（$compile，$rootScope，$controller）{
$compile=\$compile；
$rootScope=\u$rootScope；
$controller=$controller；
MainCtrl=$controller（'MainCtrl'）；
}))
描述（“MainCtrl”，函数（）{
它（“应该有一个消息属性”，function（）{
expect（MainCtrl.message）.toBe（'helloworld'）；
});
});
描述（“大写指令”，函数（）{
它（“应该返回大写文本”，函数（）{
元素=“{MainCtrl.message}
”；
element=$compile（element）（$rootScope）；
$rootScope.$digest（）；
expect（element.text（））.toBe（'HELLO WORLD'）；
});
});
});

使用

$timeout

等待角度绑定完成，这就是如何使用

.text（）

：

指令（'uppercase'，函数（$timeout）{
返回{
限制：“A”，
是的，
模板：“”，
链接：功能（范围、el、属性）{
$timeout（函数（）{
el.text（el.text（）.toUpperCase（））；
});
}
}
});

---

太棒了。。。你怎么知道这会起作用？它背后的思想过程是什么…@Ishan我得到了

{{MAIN.MESSAGE}}

最初的结果。因此，我决定使用

$timeout

，这给了

{{}}

一些时间进行评估。如何对其进行单元测试？我不能在我的规范中运行$timeout，对吗？我很不确定这是否是一个好的解决方案。根据服务器性能的不同，简单的$timeout可能“不够”@sprottens您认为应该用什么来代替$timeout？