Isolate scope in Angularjs custom directives - "="

Question

I'm trying to create a simple directive for a test app I'm making. My directive is as follows:

  .directive('answer', function(){
    return {
      restrict: "E",
      scope: {
        minl: "=",
        model: "="
      },
      template: '<input id="option" name="opts" type="text" ng-model="model" ng-minlength="minl">'
}

})

In my html file I'm using this directive with the following code:

<answer ng-repeat="option in newQuestion.opts" minl="minLength" model="option.value"></answer>

I have a minLength property on my controller scope (equal to 10) and option.value has a value on the scope as well. However, my template does not pull in either of these values when I load the html page. Does anybody have any advice on what I might be doing wrong here?

this worked when I used minl: "@" rather than "=", but ng-minLength is still not pulling in the value — fluidddynamics
– fluidddynamics, Commented Oct 22, 2014 at 21:34

Linial · Accepted Answer · 2014-10-22 21:43:58Z

1

Assuming that you have minLength declared as an int on the controller ( NOT Directive's controller ) your code is perfectly written Angular.

I've created it again on plunkr, so you can look, I didn't change anything beside declaring the minLength value on the Controller. Plunk, Please notice that I called it on my end minl at the controller. thats the only difference

  scope: {
    minl: "=",
    model: "="
  }

Is the way to go.

answered Oct 22, 2014 at 21:43

Linial

1,1449 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Linial Over a year ago

Ofc look at the Inspect Element to see that ng-minlength is 10. And becomes valid when you type more than 10.

fluidddynamics Over a year ago

weird. i can see clearly that this is working, but it doesn't work when i do it myself...

Linial Over a year ago

Try debugging your own code. make sure that the value on the controller is defined. Also, first try without ng-repeat, then try with it. Move forward slowly & carefully.

fluidddynamics Over a year ago

I guess nothing is binding to the template, but I don't know why. Even when i use the @ and define minl as 10 in the html attribute....

Linial Over a year ago

Ok, we can debug it as well. Copy Paste into a plunk ? the controller, directive, and html?

|

Carlos Pliego · Accepted Answer · 2014-10-22 21:34:47Z

0

Write your directive scope allocations like this:

       scope: {
         minl: "=myMinl",
         model: "=myModel"
  }

then in your markup do this:

<answer ng-repeat="option in newQuestion.opts" myMinl="minLength" myModel="option.value"></answer>

answered Oct 22, 2014 at 21:34

Carlos Pliego

8691 gold badge8 silver badges20 bronze badges

2 Comments

fluidddynamics Over a year ago

nope, ng-minLength still evaluates to minl when I do that.

Carlos Pliego Over a year ago

Right, its supposed to evaluate to minl. because you are assigning myMinl to minl.

Collectives™ on Stack Overflow

Isolate scope in Angularjs custom directives - "="

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related