如何从控制器获取内部指令创建的范围？答案

【问题标题】：How to get the scope created by inner directive from controller?如何从控制器获取内部指令创建的范围？
【发布时间】：2013-03-09 02:05:43
【问题描述】：

HTML 代码：

<body ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <div id="aaa" myd1>
      In a directive
    </div>
    <button ng-click="showDirectiveScope()">Show Directive Scope</button>
</body>

角度代码：

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope,$element) {
    $scope.name = 'World';
    $scope.showDirectiveScope = function() {
        var aaa = $element.find("#aaa");
        console.log(aaa);
        console.log(angular.element(aaa).scope());
    }
});

app.directive('myd1', function(){
    return {
        scope: true
    }
});

页面中会有一个显示指令范围按钮。当我点击它时，我希望 Angular 找到带有id=aaa 的 DOM，然后获取并记录它由指令 myd1 创建的范围。

但是会打印undefined，哪里错了？

现场演示：http://plnkr.co/edit/ravJoVH2oGLDD0VUsO82?p=preview

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

不用jQuery回答：

app.controller('MainCtrl', function($scope,$element,$window) {
    $scope.name = 'World';
    $scope.showDirectiveScope = function() {
        var aaa = $window.document.getElementById('aaa');
        console.log(aaa);
        console.log(angular.element(aaa).scope());
        console.log($element.scope());
    };
});

【讨论】：

是的！我们可以使用getElementById！
这是在内部指令中获取 angular-ui-map 映射对象的最佳方式吗？

【解决方案2】：

jqLite 不支持选择器。在你的 plunker 中包含 Angular 之前的 jQuery，它将起作用：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

您还可以稍微简化您的日志，因为 var aaa 是一个包装好的 jQuery 元素：

console.log(aaa.scope());

工作人员：http://plnkr.co/edit/bUsxo2UBWuiNkXBf8fsI?p=preview

【讨论】：

$element.find("#aaa")可以找到正确的DOM，看日志：[ready: function, toString: function, eq: function, push: function, sort: function…]
@Freewind，这是错误的元素。添加 jQuery 后，日志会显示 [div#aaa.ng-scope, prevObject: b.fn.b.init[1], context: body.ng-scope, selector: "#aaa", jquery: "1.9.1", constructor: function…]。工作人员：plnkr.co/edit/bUsxo2UBWuiNkXBf8fsI?p=preview
你是对的！而且我也想知道有什么不使用jQuery的解决方案？