Question

我们正在慢慢移植一个应用程序来使用Angular。我有一个角度模块和一个试图将一些功能绑定到HTML元素的指令。

angular.module('myApp', [ ])

  .controller('myCtrl', function($scope){
    $scope.someFunction = function(){return "Not what I want to see.";};
    $scope.foo = "BAR";
  })

  .directive('myDirective', function(){
    return {
      restrict: 'EA',
      transclude: true,
      template: '<div><p>Here is some template html.</p></div>',
      link:{ post:function(scope, element, attrs){
               var elementId = attrs.myId;
               scope.someFunction = function(){return "I want to see this, elementId: " + elementId;};
               scope.foo = "xxxx";
             }
      }
    };
  });

给出一些html：

...
<myDirective my-id="e1"></myDirective>
<myDirective my-id="e2"></myDirective>
<myDirective my-id="e3"></myDirective>
...

还有一些javascript：

...
var test = angular.element(document.getElementById("e2") ).scope();
alert(test.someFunction());
...

我希望看到“我想看到这个，elementId：e2”，但我不是。当我使用Firebug检查javascript时，我看到测试对象正在引用主范围，而不是我期望的孤立范围（希望？）。我可以告诉你，因为test.foo的值为“BAR”，而不是“xxxx”。另外，我可以在Firebug中看到$$ childHead对象是我想要的内部范围，所以我非常肯定除了像test之外还有一种方法可以实现它。$$ childHead。有没有正确的方法来做到这一点？

整个团队对Angular来说还是比较新的，如果我错过了一些明显的东西，请原谅我。我意识到这可能不是“Angular方式”（欢迎任何评论），但它符合我们目前的迁移策略和需求。提前谢谢。

Answer 1

我需要添加范围：true，所以我有这个：

return {
  restrict: 'EA',
  transclude: true,
  scope: true,
  ...
};

到我的指令定义。 PSL让我走上了正确的道路;我认为传递给链接器的范围对每个元素都是唯一的。这是一个例子。 http://plnkr.co/edit/w7OGtRgtys7AeRtWH9qe?p=info

从Javascript调用AngularJS隔离范围函数

1 个答案: