Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="ngDisaled doesn't work becuase isolated scope of directive" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
  <body ng-app="DemoApp">
    <div ng-controller="DemoController">
Programming language: <input type="search" ng-model="profile.newLanguage">
      <input type="button" value="Add" 
      add-language
      needs-disabled="reachThreshold()"
      ng-disabled="needsDisabled"
      languages="profile.languages" 
      new-language="profile.newLanguage"/>
      <div><ul>
        <li ng-repeat="language in profile.languages">  {{language}}
        </li></ul>
      </div>
    </div>
  
</body>
</html>
 
angular.module('DemoApp',[])
.controller('DemoController', ["$scope", function($scope){
  $scope.profile = {};
  $scope.profile.languages = ['a', 'a', 'a', 'a', 'a'];
   $scope.reachThreshold = function() {
    return $scope.profile.languages.length === 5;
  };
}])
.directive('addLanguage', [function(){
  return {
    scope: {
      languages: '=',
      newLanguage: '=',
      needsDisabled: '='
    },
    link: function(scope, ele, attr) {
        ele.on('click', function(){
          scope.languages.push(scope.newLanguage);
          scope.$apply();
        });
  }};
}]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
fedcuitpro
0viewers