CODEWITHSUNDEEP
javascriptangularjshtmlangularjs-directive
Harsh
Harsh

Reputation: 1695

Isolate scope not updating values in directive

So I am trying to update value in a directive via isolate scope. But isolate scope is not updating value inside directive although no error is thrown. I am using a service to update value sent by one directive via input box and that value has to used by another directive via service and isolate scope. Suggestions would be hugely helpful.

JavaScript:

var app = angular.module("testApp", []);


app.controller("testAppController", function($scope, inputService) {

    $scope.ctrlKeywordinput = inputService.serviceKeyword;
    console.log("in my controller" + $scope.ctrlKeywordinput);
})

app.directive("testDirective", function(inputService) {
    return {
        restrict: 'E',
        scope: {
            keyword: '='
        },
        template: '<div class = "poster-box"  >this is a directive {{keyword}} . Does my work</div>',
        link: function(scope, element, attrs) {
            console.log("inside test directive " + scope.ctrlKeywordinput);
        }
    }
});

app.directive("inputDirective", function(inputService) {
    return {
        restrict: 'E',
        template: '<div class = "directive-poster"><input type="text" ng-model="keyword"></input> <input type="button" ng-click="sendKeyword()"></input></div>',
        link: function(scope, element, attrs) {
            console.log("inside input directive");
            scope.sendKeyword = function() {
                var servKeyword = scope.keyword;
                inputService.sendKeyword(servKeyword);
            }
        }
    }
});

app.service("inputService", function() {
    this.sendKeyword = function(servKeyword) {
        console.log("inside sendKeyword function" + servKeyword);
        this.serviceKeyword = servKeyword;
        console.log("serviceKeyword " + this.serviceKeyword);
    };
});

<html ng-app="testApp">
<head>
    <meta http-equiv="x-ua-compatible" content="ie=edge" />

    <title>PicStory</title>

    <meta name="viewport" content="initial-scale=1.0, width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
    <!-- Allows HTML5 elements to work inside IE6-8 -->
    <!--[if lt IE 9]>
            <script type="text/javascript" src="JS/html5shiv.js"></script>
        <![endif]-->
        <script src="lib/jquery2.1.js"> </script>
    <script src="lib/angular.js"> </script>

    <script src="lib/bootstrap.js" type="text/javascript"></script>

  <script src="JS/main.js"> </script>
    <link rel="Stylesheet" href="CSS/style.css" />
    <link href="CSS/bootstrap.css" rel="stylesheet">
    <!--[if gte IE 9 ]>
        <link rel="stylesheet" type="text/css" href="CSS/_styles.css" media="screen">
        <![endif]-->
    <!--[if !IE]>-->
    <!--<![endif]-->
</head>
<body ng-controller="testAppController">
    <header id="pageHeader" class="header">
            <nav>

                <ul class="nav nav-tabs" id="menuLinks">
                    <li role="presentation" class="active"><a href="#">Home</a></li>

                    <li role="presentation" class="dropdown" >
                        <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="#">Gallery 
                        <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">Top Galleries</a></li>
                            <li><a href="#">Random Galleries</a></li>
                        </ul>        
                    </li>

                    <li role="presentation" class="disabled"><a id="projectLi"  href="www.google.com">Projects</a></li>
                    <li role="presentation" class="sign-in-nav"><a href="#" >Sign In</a></li>
                </ul>
            </nav>
            </header>
    <div id="pageContentContainer" class="pageContentContainer" >

<!-- Button trigger modal -->
<button id= "btn1" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">
            <div class="container">
            <h2 class="label label-default center-this-element">Not A User?</h2> 

            </div>
        </h4>
      </div>
      <div class="modal-body">
             <button type="button" class="btn btn-default block-this-element center-this-element" >Sign Up</button>
                <h2 class="label label-default center-this-element">Or</h2> 
             <button type="button" class="btn btn-default block-this-element center-this-element" >Sign in</button>
      </div>

    </div>
  </div>
</div>


<div class="panel panel-default">
    <div class="panel-body"> Explore random galleries
    </div>
</div>


HTML:

    </div>



    <div>
    <input-directive></input-directive>
    <div>

    <div class = "directive-poster"> 
    <test-directive keyword = "ctrlKeywordinput" ></test-directive>
    <test-directive keyword = "ctrlKeywordinput" ></test-directive>

    </div>



    <footer class="jumbotron">

        @Copyright
    </footer>
    </body>

Upvotes: 0

Views: 172

Answers (1)

omgaz
omgaz

Reputation: 357

Just a tip, it may or may not solve things but Angular (and JS) pass primitives by value rather than by reference.

Usually it's best to map primitive types (booleans, integers and strings) to objects such as scope.viewModel.keyword. That way it gets passed by reference and could fix your problems... if not it's still a good idea to do as Angular scope is troublesome.

Upvotes: 1

Related Questions