$compile 不在指令的 link 函数上应用模板字符串的表达式

Question

我是 AngularJs 的新手，我在以下代码中遇到了麻烦。

return {
        require: ['^myElement'],
        restrict: 'EA',
        replace: true,
        scope: true,
        link: function (scope, element, attrs, ctrls) {
            scope.xa = 'This is xa'
                    scope.$on('form:submit', function() {

                        scope.xb = 'This is xb'
                        var data = $compile( '<p>{{xa}} {{xb}}</p>' )( scope );
                        console.log(data.html()); //result is '{{xa}} {{xb}}', the expressions were not applied
                    });
                }
}

我从日志中得到的输出是'{{xa}} {{xb}}'，应该是

'This is xa This is xb'

这是plunker source code

Answer 1

很可能 angularjs 没有时间运行 $digest 循环并且它没有解释变量，因为如果你将结果附加到 html 元素它作品：

http://plnkr.co/edit/N7TfEC1R1qNcPxY6eXNG?p=preview

scope.$on('form:submit', function() {
  scope.xb = 'This is xb'
  var data = $compile( '<p>{{xa}} {{xb}}</p>' )( scope );
  element.append(data);
});

Answer 2

我有一个模态对话框来显示将从模板缓存中编译的消息。在我的原始示例中，无论我做什么，它都只是 return 从模板编辑原始字符串。解决方法是我需要将编译代码放入指令的 controller 部分而不是 link 部分，然后我 return 将编译后的字符串放入变量 $scope.data我会在 link

上使用它

controller: function ( $scope, $element, $attrs ) {

        var vsTemplate = $templateCache.get($attrs.templateUrl)
        $scope.data= $compile(vsTemplate)($scope)
},
link: function (scope, element, attrs, ctrls) {
      dialogs.notify('Errors Summary', $scope.data)
}

$compile 不在指令的 link 函数上应用模板字符串的表达式

$compile does not apply the expression of template string on link function of directive

angularjs

angularjs-directive

angularjs-compile