Динамическое переключение между связанными видами в AngularJS

Question

Я совершенно новой для AngularJS и я в настоящее время пытаются выяснить, как наилучшим образом подходить к этой функции:

Я ищу способ, где у меня есть кое-что вдоль линий <span editable>I am a text</span> , и когда пользователь нажимает на него, он становится редактируемым (например, <input type="text">), пока элемент не теряет фокус, после чего он должен вернуться к исходному <span editable>...</span> с новым значением. Кроме того, это скорее не статический текст, а привязка к модели.

Я думаю, что это должно быть выполнимо с помощью директив, но я ударил дорожный блок вдоль линии относительно того, как эта директива действительно будет работать.

app.directive('editable', function() { 
    return function(scope, element, attrs) { 
     element.bind('click', function() { 
      // something. 
     }); 
    } 
}) 

Может ли кто-нибудь предоставить мне руководство или решение?

Спасибо заранее,
- Мэнни

Answer 1

Как я сделал это, чтобы создать директиву, которая может быть применена к любому элементу HTML. Он скрывает стандартный элемент и показывает текстовое поле, когда вы нажимаете на него. Затем он возвращается к исходному элементу, когда вы удаляетесь от поля.

Подробнее here

и здесь компаньон скрипка

http://jsfiddle.net/cmyworld/6gMXL/

Вы можете использовать его как

<h1> 
     <editable model="heading" on-delete="" defaultval="Default val"> 
    </h1>