Javascript AngularJS ngRequired自定义指令

我有一个小指令要将

required

类添加到表单元素的最近标签。它可以与属性

required

配合使用，但在使用

ng required

时，它似乎没有将指令绑定到元素

如何在

ng required

更改时动态触发指令绑定

注意如果可能的话，我不想在HTML中添加任何额外的标记，以获得一个全局指令

var-app=angular.module（'app'，[]）；
app.controller（'myController'，函数（$scope）{
$scope.isRequired=false；
$scope.$watch（'isRequired'，函数（）{
angular.element（'#html'）.text（angular.element（'#required element'）.html（））；
})
});
应用指令（'必需'，功能（）{
返回{
限制：“A”，
链接：函数（$scope$elem）{
console.log（'Linking'）；
label=$elem.closest（'.input container'）。find（'label'）；
if（标签长度）{
label.addClass（“必需”）；
}
}
};
});
。必填项：在{
内容：“*”；
颜色：红色；
}

标签
标签动态
设置为必需：{isRequired | json}

正如@PetrAveryanov在评论中指出的，可以在指令中观察属性以跟踪其变化

不过，似乎我们需要两条指令。一个用于静态
required
，另一个用于观察
ngRequired
添加的属性


angular
.module（'应用程序'，[]）
.controller（'myController'，函数（$scope）{
$scope.isRequired=false；
$scope.$watch（'isRequired'，函数（）{
angular.element（'#html'）.text（angular.element（'#required element'）.html（））；
});
})
.factory（'requiredLabelFactory'，函数（）{
toggleLabel=函数（$elem，labelState）{
label=$elem.closest（'.input container'）。find（'label'）；
if（标签长度）{
label.toggleClass（'required'，labelState）；
}
};
返回{
切换标签：切换标签
};
})
.directive（'required'，函数（requiredLabelFactory）{
返回{
限制：“A”，
链接：函数（$scope$elem）{
requiredLabelFactory.toggleLabel（$elem，true）；
}
}
})
.指令（'ngRequired'，函数（requiredLabelFactory）{
返回{
限制：“A”，
链接：函数（$scope、$elem、attr）{
属性$observe（'required'，函数（newVal）{
requiredLabelFactory.toggleLabel（$elem，newVal）；
});
}
};
});
。必填项：在{
内容：“*”；
颜色：红色；
}

标签
标签动态
设置为必需：{isRequired | json}

ng required只是一个指令，您可以覆盖它或修饰它——添加任何行为