Is there a way to bind an expression inside the NG-MODEL directive without causing an error? Can this be achieved using a compile function? Below is my HTML markup:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-controller="AppCtrl">
<div></div>
<range min="0" max="100" model="width"></range>
</body>
</html>
<script src="Scripts/angular.min.js"></script>
<script>
var app = angular.module("pager", []);
app.run(function($rootScope){
console.log($rootScope);
});
angular.element(document).ready(function(){
angular.bootstrap(document.querySelector("html"), ["pager"]);
})
app.directive("range", function ($compile) {
return {
restrict: "E",
replace: true,
scope:{
min:"@",
max:"@",
model:"@"
},
template: "<input type='range' ng-model='{{model}}' value='0' min='{{min}}' max='{{max}}'/>",
}
})
</script>
When using ng-model='{{model}}', it generates an error. Is there a method to directly access the model attribute from the directive and create the variable for ng-model without errors? Would linking it that way work, or do I need to utilize $compile? The goal is for directives to generate variables in the child scope and then bind them to the ng-model they are creating. In this case, I aim to use the attribute "model" from the directive to establish the variable for the ng-model. For instance, in this scenario, "width" should replace the {{model}} expression.