AngularJS

Question

对于以下 fiddle https://jsfiddle.net/qcuennL5/，我想访问范围内的 "element"。$watch('$select.isOpened', ...)。我该怎么做？

scope.$watch('$select.isOpened', function(isOpened) {

if(isOpened) {
    //Don't have access to 'element'. Hacked with $('...')
        $('div.dropdown').show();
    } else {
        $('div.dropdown').hide();
}

Answer 1

您可以访问 element 参数。

在 chrome 调试器中，如果被检查的属性未在正在执行的函数中使用，我们将无法检查闭包属性。

控制台语句将正确打印该值。

不确定这是否是一个 chrome 错误。

Answer 2

您不需要使用 jQuery 或观察示波器上的任何对象。

只需像这样使用 ng-show 指令 ...

ng-show="$select.isOpened"

JS/TEMPLATE

template: '<div class="select" ng-click="$select.click(\'I was clicked!\', $event)">' +
                '<div class="select-label">{{title}}</div>' +
                '<div class="select-caret"><span class="select-dropdown"></span></div>' +
                '<div class="dropdown" ng-show="$select.isOpened">This is a dropdown!</div>' +
          '</div>'

同时从 CSS

中的 div.dropdown 中删除 display 属性

JSFIDDLE

使用 $watch

scope.$watch('$select.isOpened', function (isOpened) {
    scope.isOpened =   isOpened;  // assign isOpened to new variable on the scope.

    // Stick the rest of your logic here            
});

HTML

'<div class="dropdown" ng-show="isOpened">This is a dropdown!</div>'

AngularJS - 在范围内访问 "element".$watch 回调函数

AngularJS - access "element" inside scope.$watch callback function

element