Suppose I have HTML with AngularJS module/controller as follows:
angular
.module("myModule", [])
.controller("myController", ['$scope', '$compile', function ($scope, $compile) {
$scope.txt = "<b>SampleTxt</b>";
$scope.submit = function () {
var html = $compile($scope.txt)($scope);
angular.element(document.getElementById("display")).append(html);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myModule" >
<div ng-controller="myController">
<form name="myForm">
<span>Age:</span><input type="number" name="age" ng-model="age"/>
<textarea ng-model="txt" ></textarea>
<input type="button" value="submit" ng-click="submit()" />
</form>
<div id="display"></div>
</div>
</body>
The above sample will allow adding an element to AngularJS app during run-time using $compile.
Suppose I want to insert an input element such as a text box name driversLinces with the attribute ng-required="age > 21", suppose I want to insert this element with conditional required feature from the JavaScript console for testing and verification purposes. Also, suppose I want to do the same but I want to modify the ng-required property if an existing element such as the age, how I can do that?
I am thinking to create a function that will access $compile somehow but not sure how. Can you help me? I am able to access the $compile service only from inside the controller.
Note: due to certain limitations and lack of information/resources, I have limited access to the full HTML code. I can access the HTML and AngularJS forms using a UI Modeler. I can add my custom HTML code but I don't know if I can enclose an existing Form Part with my own custom HTML container which is required to add a directive to access the inner parts.
I can access AngularJS scope and ng-form elements using angular.element(). I can trigger my JavaScript on Form-Load, on a click of a button, or when a model value changes. I can add a form element and link it to an AngularJS model. I could not figure out how to access the $compile service from JavaScript.
Update:
I will add more info to explain my objective or the use-case. I want to add custom validation rules and errors to the AngularJS form from JavaScript. The platform I am working with uses AngularJS, but doesn't allow me to get easy access to AngularJS code to add directives, or at least for now, I don't have the needed resources for this purpose. However, this platform provides me with ability to trigger my custom JavaScript code on a click of a button which can be triggered automatically when the form loads (on-load event). Also, I can pass the ID of the button that was clicked. With this, I was able to access the scope using angular.element('#id').scope(). This enabled me to access almost all the other elements. I can see all ng-models and ng form controllers and all its parents in the scope object. Sometimes, I have to access the $parent to reach to the root, but I think eventually I am able to access almost anything from the scope object.
Now, I need to be able to find the form elements and add custom validation rules. I can travers all form elements from the scope object, and I can figure out how to get the element ID and its binding details. All I need now is how to add a custom validation rule and error message on form-load event.
For example, I can use JSON to represent validation rules for AngularJS form as follows:
[
{
"id": "employee-name",
"required": true,
"msg": "Employee name is required."
},
{
"id": "degree",
"customValidation": "someJSFunctionName",
"msg": "The provided degree is invalid. Please review the rules and try again."
}
]
Then, on form-load event, I want to load the above rules on the form and make them effective. How is this possible? Consider that I have access to the scope object, I can use only JavaScript, and I cannot use AngularJS directives.
Tarek
from How to invoke AngularJS $compile from outside AngularJS module/code?
No comments:
Post a Comment