我是否必须使用$watch动态地将隔离作用域属性传递给我的自定义控制器？
我是否必须使用$watch动态地将隔离作用域属性传递给我的自定义控制器？
提问于 2014-10-02 18:49:39
我有一个能储存超级英雄的控制器。我想使用一个自定义指令来显示基于输入字段中输入的值的某个超级英雄。我不希望用过滤器来实现这一点。我现在被困住了，我想知道我是否需要实现类似$watch这样的东西来完成这个任务？我真的很想用最好的方法来做这件事。提前感谢！
heroController.js
var myApp = angular.module('myApp',[]);
myApp.controller('heroController', ['$scope', function($scope) {
$scope.superHero = [
{firstName: 'superman', image: 'img/url.com', superPower: 'invisibility'},
{firstName: 'batman', image: 'img/url.com', superPower: 'xray'},
{firstName: 'stretch', image: 'img/url.com', superPower: 'flight'},
{firstName: 'speedy', image: 'img/url.com', superPower: 'strength'},
{firstName: 'aquaman', image: 'img/url.com', superPower: 'aqua'},
{firstName: 'hulk', image: 'img/url.com', superPower: 'stretch'}
];
}]);heroDirective.js
myApp.directive('heroDirective', function(){
return {
restrict: 'EA',
templateUrl: 'heroView.html',
replace: true,
scope: {
firstName: '@fname',
lastName: '@lname',
superPower: '@spower'
}
};
});heroView.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<figure>
<ul>
<li>{{superHero.firstName}}</li>
<li>{{superHero.lastName}}</li>
<li>{{superHero.image}}</li>
<li>{{superHero.superPower}}</li>
</ul>
</figure>
</body>
</html>index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body ng-app="myApp">
<div ng-controller="heroController">
<input ng-model="heroDirective.firstName"/>
<hero-directive ></hero-directive>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
<script src="heroController.js"></script>
<script src="heroDirective.js"></script>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-10-02 19:20:39
对于filter来说，这是一个很好的例子，但是由于您要求不使用它，所以我将以角的方式实现它：
http://plnkr.co/edit/rsStQ5lKdG9Qvm6X4Udz?p=preview
.html
<span>insert hero:</span>
<input ng-model="superHeroInput" />
<hero-directive super-hero="selectedSuperHero"></hero-directive>.js
var app = angular.module('app', []);
app.controller('heroController', function($scope, $location, $timeout) {
$scope.superHeros = [{
firstName: 'superman',
image: 'img/url.com',
superPower: 'invisibility'
}, {
firstName: 'batman',
image: 'img/url.com',
superPower: 'xray'
}, {
firstName: 'stretch',
image: 'img/url.com',
superPower: 'flight'
}, {
firstName: 'speedy',
image: 'img/url.com',
superPower: 'strength'
}, {
firstName: 'aquaman',
image: 'img/url.com',
superPower: 'aqua'
}, {
firstName: 'hulk',
image: 'img/url.com',
superPower: 'stretch'
}];
$scope.superHeroInput = '';
$scope.$watch('superHeroInput', function(newValue) {
if (!newValue || newValue.length == 0) {
$scope.selectedSuperHero = $scope.superHeros[0];
} else {
var randomItem = $scope.superHeros[Math.floor(Math.random() * $scope.superHeros.length)];
$scope.selectedSuperHero = randomItem;
}
});
});
app.directive('heroDirective', function() {
return {
restrict: 'EA',
templateUrl: 'heroView.html',
replace: true,
scope: {
superHero: '='
}
};
});heroView.html
<figure>
<ul>
<li>{{superHero.firstName}}</li>
<li>{{superHero.image}}</li>
<li>{{superHero.superPower}}</li>
</ul>
</figure>那发生什么事了？以superHeroInput为界的输入文本。当它发生变化时，使用新的输入调用$scope.$watch('superHeroInput', ...，然后如果有空字符串，我选择了第一个超级英雄，否则，随机超级英雄(您应该将超级英雄过滤逻辑放在那里)。
在此之后，所选的超级英雄和指令之间有一个绑定。当选定的超级英雄被更改时，指令将更新他的视图。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26167539
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号