Angularjs 使用自定义指令进行简单标签编辑

我在这里做了非常简单的编程-

现在我想要的是，当我点击按钮时，我希望我的自定义标签转换成输入字段，用户可以在其中输入任何值（同时，同一按钮应该显示“保存”文本）

当用户单击“保存”按钮时，在文本框中写入新值后，我希望我的标签显示用户刚刚输入的新更新值

我不知道该怎么做。我需要帮助

注意：我不需要其他控件

JSFIDLE代码段：

my.js

var app=angular.module('app',[]);

app.controller('startCtrl',function($scope){

    $scope.name = "Hello";
    $scope.click = function() {
        alert('button clicked');
    }

});


app.directive('myLabel',function(){
    return {
        restrict:"E",
        replace:true,
        template:'<div>{{name}}</div>'
    }
});

var-app=angular.module（'app'，[]）；
应用控制器（'startCtrl'，功能（$scope）{
$scope.name=“你好”；
$scope.click=function（）{
警报（“点击按钮”）；
}
});
应用程序指令（'myLabel'，函数（）{
返回{
限制：“E”，
替换：正确，
模板：“{name}}”
}
});

很好，您已经开始了一些工作，但是您还不能对您的指令中关于您的要求做任何特别的事情。除了为您编写整个代码之外，没有什么可以做的，而这并不是这么回事。您是否介意在完成此任务时多做一点努力，如果您不能做更多的事情，请询问具体的原因，例如，“为什么名称不从我的指令更新”，而不是“给我代码plz”哇！！帕特里克，我不知道该怎么做，从哪里开始？这就是为什么我带着不完整的小提琴来到这里。我只是在学习沟通时被卡住了。但这里真的什么都没有。还可以看看这里。“它不起作用，但可能会给你一些想法。”帕特里克。我想你得看看这个。干得好，你成功了！如果你愿意，你可以回答