Php AngularJS实现_Php_Angularjs_Wordpress

Php AngularJS实现

php angularjs wordpress

Php AngularJS实现,php,angularjs,wordpress,Php,Angularjs,Wordpress,我只是尝试在Wordpress中实现angularjs 我在header.php中添加了脚本 <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 我试图从下面的div打印page.php文件中的scope值 <div ng-app="myApp" ng-controller="myCtrl"> {{firstName}}+{

我只是尝试在Wordpress中实现angularjs

我在header.php中添加了脚本

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

我试图从下面的div打印page.php文件中的scope值

<div ng-app="myApp" ng-controller="myCtrl">
{{firstName}}+{{lastName}}
</div>

但在这种情况下，它将不会显示在此页面中的范围值。任何人请帮助。

尝试此

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

app.controller('MyCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";

  $scope.fullName = function() {
    return $scope.firstName + ' ' + $scope.lastName;
  };

  $scope.counter = -1;

  $scope.$watch($scope.fullName, function() {
    $scope.counter++;
  });
});

    <html ng-app="app">
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
    <meta charset=utf-8 />
    <title>JS Bin</title>
  </head>
  <body ng-controller="MyCtrl">
    First name: <input ng-model="firstName" /><br>
    Last name: <input ng-model="lastName" /><br>
    Full name: {{fullName()}}<br>
    Number of times changed: {{counter}}
  </body>
</html>

Ref:

当我编译代码时，您指定将angular库文件存储在特定位置，例如-c:\yourproject\angular.min.js。因此，您的代码是正确的，但如果您将angular library文件存储在特定位置，则必须确保您将使用angular library文件angular.min.js的正确或准确来源。以下是您的参考

<script src="angular.min.js"></script>

我认为这只是你的错误，大部分程序员都忘记了这一点

否则，请检查以下与您的场景类似的代码。希望这将对您有所帮助

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>

您是否使用控制台工具测试angular object exist？您是否也在header.php中添加了另一个JS文件作为脚本？是的，我添加了JS文件。我在控制台中没有收到任何错误。我没有收到范围值，我的控制台中没有错误，只是打印了如下{name}的名称。作用域值没有得到..检查它并让我知道我尝试了你的答案。它在我这方面不起作用。而且我使用chrome控制台进行了调试。我只是在控制器内放置了一个断点。它没有达到断点。这意味着它没有执行控制器作用域。让我们看看。我尝试了你的示例代码，这也不适用于我的End请清理浏览器Cookie并重试此代码，因为它在我的浏览器中提供了预期的输出。一步一步的过程可能会对您有所帮助。第一步：创建一个新文件夹，即angularJsPractice。2st步骤：只需打开记事本，复制建议的代码并将其保存在记事本中，然后保存在创建的文件夹位置C:\angularJsPractice中。第三步：只需访问以下链接即可获得angular library文件。第4步：复制该库代码并将其粘贴到一个新文件angular.min.js中，该文件保存在同一位置C:\angularJSPractice\5步：请在您的页面中添加此代码。我正在用.php文件尝试HTML。有什么问题吗？。它在HTML文件中工作正常，但在php文件中不工作。您在标记中添加了以下代码。angular.module'scopeExample'，[].controller'MyController'，['$scope'，function$scope{$scope.username='World'；$scope.sayHello=function{$scope.greeting='Hello'+$scope.username+'！'；}；}]；

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>
</body>
</html>