Question

我想用这个对象创建一个新范围：

$scope.model = {
    itemA: "First item",
    itemB: "Second item"
};

// I know, this is wrong, but I want to show you, what I would like to do.
var newScope = $scope.$new($scope.model);

我想在我的指令的ngTransclude-Part中访问的新范围：

link: function (scope, element, attrs, ctrl, transclude) {

            transclude(scope.model, function (clone, scope) {
                element.find('section').html("").append(clone);
            });

在模板中：

<p>{{itemA}} - {{itemB}}

但这不起作用

我的想法来自：http://angular-tips.com/blog/2014/03/transclusion-and-scopes/ 但是我不想在指令的范围内工作，而是在新的范围内工作。

Answer 1

他是我的解决方案，我找到了类似的problem。有点啰嗦，但它确实有效！

创建一个具有自己范围的新的'empty'类指令。

将此指令作为类属性添加到DOM元素中。它会自动采用新指令的范围。

在您的情况下，您可以在p标签上使用它。然后，您将在链接函数中选择此元素并在其上调用scope（）：

1. <p id="ID" class="my-empty-directive">{{itemA}} - {{itemB}}

2. create your new directive:

   angular.module('sgComponents').directive('panelData', [function () {
      return {
         restrict: 'C', // a class Directive
         scope: true // with its own scope
      };
   }]);

2. link: function (scope, element, attrs, ctrl, transclude) {

         var pTag = jQuery('#ID');     
         var angularElement = angular.element(pTag);
         var newScope = angularElement.scope(); // THIS WILL BE THE NEW EMPTY DIRECTIVE'S SCOPE

Answer 2

AFAIK在创建指令时通常会继承范围。我们的想法是创建隔离范围，这可以通过实现来完成。

.directive('directiveName', function ($compile) {
    return {
      restrict: "AE",
      scope:{
         yourModelName:"=";
      }
      link: function (scope, element) {
        var el = angular.element('<div>Here you put your template scope.yourModelName</div>');
        $compile(el)(scope);
        element.append(el);
      }
    };
  })

将从较高范围复制，但您可以在指令中更改它而不在较高范围中更改它

如何使用现有对象创建新的隔离范围？

2 个答案: