Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>UPDATE</strong> I've thought of a better way to answer the question. The old answer is below the new one.</p> <hr> <p>You can get a reference to AngularJS' required directive and apply it to your own. Heres a code sample that will do this:</p> <pre><code>var myApp = angular.module('myApp', []).directive('valRequired', function(requiredDirective) { var newDirective = {}, angularDirective = requiredDirective[0]; //This assumes angular's required directive is the first one //Copy over all other properties of the angular directive angular.extend(newDirective, angularDirective); //Change the name of our directive back to valRequired newDirective.name = 'valRequired'; //Provide our own logic in the linking function newDirective.link = function(scope, element, attr, ctrl){ //Super call angularDirective.link.apply(this, arguments); if(attr.valRequired === 'required'){ attr.$set('ngRequired', 'true'); } else { attr.$set('ngRequired', 'false'); } } return newDirective; }); &lt;input data-val-required="required" ng-model="foo" /&gt; </code></pre> <hr> <p><strong>OLD ANSWER</strong></p> <p>Using jQuery's or jQLite's <code>attr()</code> method does not change <a href="http://docs.angularjs.org/api/ng.$compile.directive.Attributes" rel="nofollow noreferrer">AngularJs' Attributes object</a>. The Attributes object is what directives use as values for their logic.</p> <p>You will also need to include the ng-required attribute, although you will not need to bind any angular expressions to it. This question will help you out there: <a href="https://stackoverflow.com/questions/4844001/html5-data-with-asp-net-mvc-textboxfor-html-attributes">Html5 data-* with asp.net mvc TextboxFor html attributes</a></p> <p>The reason for this is we need to force angular to apply the directive to this node. Updating the attribute after the compile phase of a template will not notify angular to apply new directives to the node.</p> <p>This should work:</p> <pre><code>var myApp = angular.module('myApp', []).directive('valRequired', function() { return { priority : 101, //The priority needs to run higher than 100 to get around angularjs' default priority for ngRequired link: function (scope, element, attr) { if(attr.valRequired === 'true'){ attr.$set('ngRequired', 'true'); } else { attr.$set('ngRequired', 'false'); } } }; }); &lt;input ng-required data-val-required="true" ng-model="foo" /&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload