Question

所以我试图通过隔离范围来更新指令中的值。但是，虽然没有抛出错误，但隔离范围不会更新指令内的值。我正在使用服务来更新一个指令通过输入框发送的值，该值必须由另一个指令通过服务和隔离范围使用。建议会非常有用。

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

只是提示，它可能会或可能不会解决问题，但Angular（和JS）会按值而不是通过引用传递基元。

通常最好将基本类型（布尔，整数和字符串）映射到scope.viewModel.keyword等对象。这样它就可以通过引用传递并且可以解决你的问题...如果不是这样做，因为Angular范围很麻烦。

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

1 个答案: