Javascript 无法根据用户操作动态更改angularjs指令模板

我正在尝试使用动态模板生成AngularJS指令（我的第一个指令）。想法很简单，它将是一个日历，用户可以像outlook一样切换视图（或在此处插入您最喜爱的日历）

我一直在尝试我能找到的各种编译、模板、控制器和链接。我显然错过了什么

我正在使用一个属性来存储所需的时间段（以便在默认情况下可以在标记中设置它）。从更新属性的指令外的按钮调用函数。属性按预期更新，但是我不知道如何让模板重新渲染

plnkr提供

任何帮助都将不胜感激

谢谢，

---

Eric

这就是我如何做一些事情的方式，比如你正在寻找的东西：

angular.module（“ngCalendar”，[]）
.指令（“ngCalendar”，函数工厂（）{
返回{
限制：“AE”，
替换：正确，
链接：函数（$scope，element，$attrs）{
html（“请设置句点属性”）；
$scope.$watch（'canlendarType'，函数（newValue，oldValue，scope）{
var t='sadf'；
开关（新值）{
个案‘月份’：
t=“月”；
打破
“一周”案例：
t=“周”；
打破
案件日期：
t=“日”；
打破
}
html（t）；
});
}
}
});

angular.module("ngCalendar", [])
    .directive("ngCalendar", function factory() {
        return {
            restrict: "AE",
            replace: true,
            link: function ($scope, element, $attrs) {

   element.html("<div>Please set period attribute.</div>");
   $scope.$watch('canlendarType',function(newValue, oldValue,scope){
       var t = 'sadf';
                switch (newValue) {
                    case 'month':
                        t ="<div>month</div>";
                        break;
                    case 'week':
                        t = "<div>week</div>";
                        break;
                    case 'day':
                        t = "<div>day</div>";
                        break;

        }
        element.html(t);
        });
   }
            }
    });