gpt4 book ai didi

angularjs - 显示用户名的简单指令不起作用

转载 作者:行者123 更新时间:2023-12-04 23:41:21 25 4
gpt4 key购买 nike

我制作了一个简单的自定义指令示例来显示一个人的姓名。它仍然没有显示出来。有人可以帮忙吗?

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<person></person>
<script>
//module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function(){
$scope.name = "Peter";
});
//directive declaration
app.directive('person',function(){
return {
restrict: 'E',
template: '<div>' {{ name }} '</div>'
};
});
</script>
</body>
</html>

最佳答案

您只需要使用正确的 Javascript 语法。我说的是字符串连接(你不需要)。你也忘了注入(inject)$scope进入 Controller 。正确的语法:

// module declaration
var app = angular.module('myApp', []);

// controller declaration
app.controller('myCtrl', function($scope) {
$scope.name = "Peter";
});

// directive declaration
app.directive('person', function() {
return {
restrict: 'E',
template: '<div>{{name}}</div>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<person></person>
</div>


以上对您有用,但这只是简单的语法内容。更重要的是你 不应该 编写这样的指令,仅仅是因为它们没有增加真正的值(value)。你可以写 {{name}}在完全没有指令的模板中。

现在有用的指令看起来像这样:

// module declaration
var app = angular.module('myApp', []);

// controller declaration
app.controller('myCtrl', function($scope) {
$scope.user = {
name: "Peter",
age: 12,
hobby: "Coding, reading"
};
});

// directive declaration
app.directive('person', function() {
return {
scope: {
data: '='
},
template:
'<div>{{data.name}}, {{data.age}}</div>' +
'<small>{{data.hobby}}</small>'
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
<person data="user"></person>
</div>


在上面的示例中,您隔离了指令的范围(因此它成为 UI 组件),使其真正可重用和灵活。更喜欢这种方法。

关于angularjs - 显示用户名的简单指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36712256/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com