angularjs $ watch没有在指令中触发

Question

Custom directive $watch is not getting triggered when i use angularjs 1.3 and above. it's working with angularjs 1.2.

Spend many hours, tried almost everything, but it doesn`t work

code sample :

<ul class="dropdown-list-container" ng-show="isStateOpen" flexcroll="dynamic">
 <li ng-click="selectState(schoolPage.defaultState)">{schoolPage.defaultState.stateName}}</li>
</ul>

$watch is triggered very first time after that it's not triggered newVal and oldVal are undefined.

custom Directives:

directive('flexcroll', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, lElement, attr) {
            var parentHeight = lElement.height();
            var child = lElement.children(':eq(0)');

            scope.childHeight= function(){              
                return child.height();
            };                  
            scope.$watch(scope.childHeight, function(newVal, oldVal){
                if(attr.flexcroll=='dynamic'){
                var maxHeight = parseInt(lElement.css('max-height'));
                var childNewHeight = newVal;
                if(childNewHeight > maxHeight){
                    lElement.css({'height': maxHeight+"px"});
                } else {
                    lElement.css({'height': (childNewHeight+5)+"px"});
                }
                }
            },true);

        }
    };
})

Answer 1

Try this scope.$parent.$apply()

running the digest cycle inside might help.