是否可以呈现具有隔离范围的 angular 指令模板？

Question

我遇到了使用隔离作用域的 angular 指令的奇怪行为。显然，模板是使用旧范围（即使被嵌入）而不是新范围解析的。

这听起来有点奇怪，因为它违反了指令范围的 'isolation'

html :

<div ng-app="myApp">
  <div ng-controller="MyController">
    out prop = {{prop}}
    <div my-directive prop="'valueIN'">
      in prop = {{prop}}
    </div>
  </div>
</div>

js

function MyController($scope) {
  $scope.prop = 'valueOUT';
}

angular.module('myApp',[]).directive('myDirective', function() {
  return {
    scope: { prop: '=' }
  };
});

这输出：

Angular 1.1

out prop = valueOUT
in prop = valueIN

Angular 1.2

out prop = valueOUT
in prop = valueOUT

这对我来说听起来很奇怪... 嵌入模板也有相同的行为。

是否可以在 1.2 中获得 1.1 的行为？

对应fiddle： https://jsfiddle.net/4s1fxjmq/

Answer 1

一种方法是在适当的范围内重新编译元素：

.directive('myDirective', ['$compile', function($compile) {
  return {
    scope: {
      prop: '='
    },
    link: function(scope, element, attr) {
      attr.$set('myDirective', null)
      $compile(element)(scope)
    }
  }
}])

是否可以呈现具有隔离范围的 angular 指令模板？

Is it possible to render angular directive templates with isolated scope?

javascript

angularjs

angularjs-directive

angularjs-ng-transclude