Question

我通过覆盖指令的编译来自定义指令模板，但是在运行编译函数后它不会调用链接函数。

angular.module('app').directive('ngValidate', ['$compile', function($compile){
  return {
    restrict: 'A',
    require: '?ngModel',
    compile:function($element, $attrs, linker){
        // this run
        console.log('compile>>>');

        // append error message
        $element.append('<div></div>');
        $element.bind('blur',function(){
            console.log('onblur');
        });

        $compile($element.contents());
    },
    controller: function($scope, $element, $attrs){
        // this run
        console.log('controller>>>');
    },
    link: function($scope, $element, $attrs, ctrl) {
        // this doesn't run
        console.log('link>>>');
    }
  }
}]);

我需要在编译后运行链接的原因我想访问范围，可以从编译中访问范围吗？

Answer 1

如注释中所述，如果你有一个编译函数，它应该返回链接函数，而不是在指令定义对象上单独定义它。

angular.module('app', []).directive('ngValidate', ['$compile', function($compile){
  return {
    restrict: 'E',
    require: '?ngModel',
    compile:function($element, $attrs, linker){
        // this run
        console.log('compile>>>');

        // append error message
        $element.append('<div></div>');
        $element.bind('blur',function(){
            console.log('onblur');
        });

        $compile($element.contents());
        return function($scope, $element, $attrs, ctrl) {
          // this doesn't run
          console.log('link>>>');
        }
    },
    controller: function($scope, $element, $attrs){
        // this run
        console.log('controller>>>');
    }
  }
}]);

http://jsfiddle.net/uGk4f/

AngularJS - Override指令的编译函数不调用链接函数？

1 个答案: