隔离范围而不更新指令中的值

Question

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: 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>

Answer 1

Just a tip, it may or may not solve things but Angular (and JS) pass primitives by value rather than by reference. 只是一个提示，它可能解决也可能不会解决问题，但是Angular（和JS）通过值而不是通过引用传递基元。

Usually it's best to map primitive types (booleans, integers and strings) to objects such as scope.viewModel.keyword . 通常，最好将原始类型（布尔值，整数和字符串）映射到诸如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. 这样，它就可以通过引用传递并可以解决您的问题...如果没有，那么这样做仍然是一个好主意，因为Angular范围很麻烦。

隔离范围而不更新指令中的值

问题描述

1 个解决方案

解决方案1
1 2015-02-18 05:37:59

隔离范围而不更新指令中的值

问题描述

1 个解决方案

解决方案1 1 2015-02-18 05:37:59

解决方案1
1 2015-02-18 05:37:59