所以我尝试通过隔离范围更新指令中的值。但隔离范围不会更新指令内的值，尽管没有抛出错误。 我正在使用一项服务来更新一个指令通过输入框发送的值，并且该值必须由另一个指令通过服务使用并隔离范围。 建议将非常有帮助。
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">×</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>
最佳答案
只是一个提示，它可能会也可能不会解决问题，但 Angular(和 JS)通过值而不是引用传递基元。
通常最好将基本类型( bool 值、整数和字符串)映射到诸如 scope.viewModel.keyword 之类的对象。这样它就可以通过引用传递并可以解决您的问题...如果没有，这仍然是一个好主意，因为 Angular 范围很麻烦。
关于javascript - 隔离范围不更新指令中的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28576576/