ng-hide from parent scope
How to take the ng-bind value and apply to the isolated scope.
HTML
<script src="http://code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.min.js"></script>
<html ng-app="app">
<body ng-controller="Ctrl">
directive 1: <span ng-hide='hide' dir1='desc' dir2='desc'></span><br>
directive 2: <span ng-hide='hide' ></span><br>
<input type='checkbox' ng-model='hide'> HIDE
</body>
</html>
JavaScript
function Main() {}
angular.module('app', []).directive('dir1', function() {
return {
restrict: 'A',
scope: {
dir1: 'evaluate',
ngHide: 'accessor'
},
link: function(scope, elm, attr, ngModelCtrl) {
this.element = elm;
element.text(scope.dir1);
// Bind from parent.
scope.$watch(function() {
return scope.ngHide()
}, function(value) {
element.css('display', value ? 'none' : '');
scope.hideElem = value;
});
}
};
}).directive('dir2', function() {
return {
restrict: 'A',
link: function(scope, elm, attr, ngModelCtrl) {
elm.text(scope.$eval(attr.dir2));
}
};
});
function Ctrl($scope) {
$scope.desc = 'popis'
}