Disable span text in angularjs

How can span be disabled or enabled ??

It can hide or show .

Indirectly you can do this

$scope.clickMe=function(){
   $scope.disable=!$scope.disable;
   if(!$scope.disable)
     return;
  // enable code
}

This is not related to AngularJS, it's pure HTML/CSS!

In the way that disabled doesn't do anything on an HTML span, in the same way the one that angularjs adds has the same effect. The disabled attribute is not global - it is only allowed on form controls

Maybe you are referring to having cursor: no-drop or having user-select: none; or just adding a CSS class that will act as a visual indicator for that span (background: #ccc).

I believe your question is a little too broad. A span doesn't have a disabled state, so what you are doing doesn't really make any sense. This would make more sense to have the ng-disabled directive set on something such as a button.

If you simply which to hide the text then you can use the ng-if that you already have or you could use the ng-show directive. E.g.

<div ng-init="shouldShow = true">
    <button ng-click="shouldShow = false">Hide Div</button>
    <span ng-show="shouldShow">Text to hide</span>
    <span ng-if="shouldShow">Text to hide</span>
</div>

While in this case both ng-show and ng-if do the same thing, they do serve different purposes. ngShow will render the elements in the DOM and simply not display them, where as ng-if will stop angular from processing the children DOM elements if the statement equates to false.

However if you want to show the text in a disabled like state then you might want to use something like ng-class to set a style on the span to make the text appear disabled:

<style>
.disabled { color: #ccc; }
</style>
<div ng-init="showDisabled = false">
    <button ng-click="showDisabled = true">Disable Text</button>
    <span ng-class="{'disabled':showDisabled}">Text to be disabled</span>
</div>

Hopefully this helps with your query, if not please define your question a bit more.