angularjs – 显示用户名称不工作的简单指令

发布时间：2020-12-17 17:21:54 所属栏目：安全来源：网络整理

导读：我做了一个简单的自定义指令示例来显示一个人的姓名.它仍然没有显示出来.有人可以帮忙吗？ htmlhead script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"/script/headbody ng-app="myApp" ng-controller="myCtrl" person/

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

<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语法.我在谈论字符串连接(你不需要).你也忘了把$scope注入控制器.正确的语法：

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

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

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

// module declaration
var app = angular.module('myApp',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组件),使其真正可重用且灵活.喜欢这种方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!