1

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
    }
});

页面中将有一个Show Directive Scope按钮。当我单击它时，我希望 angular 用 找到 DOM id=aaa，然后获取并记录它由指令创建的范围myd1。

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

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

4

2 回答 2

5

没有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());
    };
});
于 2013-03-09T03:37:42.877 回答
1

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

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

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

console.log(aaa.scope());

工作插件： http ://plnkr.co/edit/bUsxo2UBWuiNkXBf8fsI?p=preview

于 2013-03-09T02:14:20.503 回答