CODEWITHSUNDEEP
javascriptangularjs
sagar chopada
sagar chopada

Reputation: 332

i cant update variable via directive in angularjs

i want to make my variable true to false in directive.. the problem is that my directive console correct but in view can't be changed . here is Plunker Link...

    var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {
          $scope.test=true;
        $scope.items = ["One", 'Two'];
})

app.directive('myDir', function () {
  return {
    restrict: 'E',
    scope: {
      myindex: '=',
      myTest:'='
    },
    template:'<div>{{myindex}}</div>',
    link: function(scope, element, attrs){
      console.log('test', scope.myindex);
      element.click(function(){
        scope.myTest=false;
        console.log(scope.myTest);
      });

    }
  };
})

Upvotes: 1

Views: 55

Answers (3)

byteC0de
byteC0de

Reputation: 5273

Pls check it out

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.test = true;
  $scope.items = ["One", 'Two'];
})
.directive("myDir", function() {
    return {
        restrict : "E",
        scope:{ myindex: '=', myTest:'=' },
        template : "<div >Jimbroo{{myindex}}&nbsp;{{myTest}}</div>",
        link: function(scope, element, attrs){
          element.bind('click', function() {
            scope.myTest = false;
            scope.$apply();
          });
        }
    };
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div ng-repeat="item in items">
  {{test}}
    <my-dir  myindex="$index" my-test="test" ></my-dir>
  </div>
</div>

Upvotes: 3

nisar
nisar

Reputation: 1065

use scope.$apply to know your scope changes in angular plnkr

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {
        $scope.test=true;
        $scope.items = ["One", 'Two'];
})

app.directive('myDir', function () {
  return {
    restrict: 'E',
     replace: true,
    scope: {
      myindex: '@',
      myTest:'@'
    },
    template:'<div>{{myTest}}</div>',
    link: function(scope, element, attrs){
      element.click(function(){
        scope.$apply(function() {
                    scope.myTest=false;
                   console.log('called');
                })

      });


    }
  };
})

Upvotes: 1

Muhammad Abid
Muhammad Abid

Reputation: 801

here is code updated

1 - use updated version of angularjs 2 - Use @ in directive

var app = angular.module('my-app', [], function () {

})

app.controller('AppController', function ($scope) {
          $scope.test=true;
        $scope.items = ["One", 'Two'];
})

app.directive('myDir', function () {
  return {
    restrict: 'E',
    scope: {
      myindex: '@',
      myTest:'@'
    },
    template:'<div>{{myindex}}</div>',
    link: function(scope, element, attrs){
      console.log('test', scope.myindex);
      element.click(function(){
        scope.myTest=false;
        console.log(scope.myTest);
      });

    }
  };
})




<!DOCTYPE html>
<html ng-app="my-app">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>

    <link rel="stylesheet" href="style.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

    <script src="app.js"></script>
  </head>

  <body ng-controller="AppController">

    <div ng-repeat="item in items track by $index">{{test}}
      <my-dir my-test="test" myindex='{{$index}}'></my-dir>
    </div>

  </body>

</html>

Upvotes: 1

Related Questions