Angularjs 显示未工作用户名称的简单指令_Angularjs_Angularjs Directive

Angularjs 显示未工作用户名称的简单指令

angularjs

Angularjs 显示未工作用户名称的简单指令,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我制作了一个简单的自定义指令示例来显示一个人的姓名。它仍然没有表现出来。有人能帮忙吗 <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">

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

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


//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
app.controller（'myCtrl'，function（）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'person'，function（）{
返回{
限制：'E'，
模板：'{{name}}''
};
});

您只需要使用正确的Javascript语法。我说的是字符串连接（您不需要）。您还忘记将

$scope

注入控制器。正确语法：

//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'person'，function（）{
返回{
限制：'E'，
模板：“{name}}”
};
});

两个问题：

您没有在控制器中注入$scope
模板是错误的

工作代码段：

//1模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'person'，function（）{
返回{
限制：'E'，
模板：“{name}}”
};
});

{{name}}
index.html
    <html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
    <person></person> 

</body> 
</html>



app.js
  //module declaration
var app = angular.module('myApp',[]);
  //controller declaration & inject $scope
  app.controller('myCtrl',function($scope){
      $scope.name = "Peter";
  });

  //directive declaration
  app.directive('person',function(){
    return {
    restrict: 'E',
      template: "<div> {{ name }}</div>" 
      };
  });

//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明和注入$scope
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.name=“Peter”；
});
//指令声明
应用程序指令（'person'，function（）{
返回{
限制：'E'，
模板：“{{name}}”
};
});
非常好的解释！