CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
fluidddynamics
fluidddynamics

Reputation: 117

Isolate scope in Angularjs custom directives - "="

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?

Upvotes: 1

Views: 76

Answers (2)

Linial
Linial

Reputation: 1154

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.

Upvotes: 1

Carlos Pliego
Carlos Pliego

Reputation: 869

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>

Upvotes: 0

Related Questions