如何在 angularjs 中使用 javascript 代码？答案

【问题标题】：How can I use javascript code inside angularjs?如何在 angularjs 中使用 javascript 代码？
【发布时间】：2017-04-24 04:24:51
【问题描述】：

我需要在 angularjs 中运行这段代码。

当我尝试执行这个模型函数时，它没有运行。

它甚至没有显示警报或控制台。

那么在angularjs中使用这个脚本文件的方法是什么

这是我在 example.html 中的代码：

<div>
{{sample}}
</div>
<div><button ng-click="name()"></div>
<script>
function name(){
alert("text");
}
</script>

【问题讨论】：

我也需要一个解决方案。我们可以从外部 js 文件导入函数并将其导入 ts 文件并从那里工作，但这只会增加代码并使应用程序变得繁重。我只想要一个使用 js 文件，就像我们在没有框架的情况下使用它一样。只需将其链接到 html 文件并开始使用它。只是普通的香草js。在处理 TS 时，我不想与它有任何关系。
您能否为您的场景添加一个示例？ @GeoMukkath

标签： javascript html angularjs

【解决方案1】：

如果我正确理解您的要求，

您需要执行一个单独的 java-script 函数。

对于 Angular 应用程序，在 Angular 范围之外运行 javascript 不是正确的方法。

如果绝对需要，您可以尝试将ng-click="name()" 替换为onclick="name()"

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

app.controller('exampleController', [function() {
  this.myFunction = function() {
    alert("Iam from angular controller");
  }
}]);

function myFunction() {
  alert("Iam from javascript");
}

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

<div ng-app="app" ng-controller="exampleController as ctrl">
  <button ng-click="ctrl.myFunction()">click me</button>
  <button onclick="myFunction()">click me</button>
</div>

@Update

如果您想在 angularjs 中使用 java 脚本库或函数或常量，我建议的方法是添加确保库或函数或常量的工厂或服务，但它不像上述解决方案那样简单。这里我添加一个sn-p 基于上述解决方案

使用以下方法有一些优点：-

它会适当地添加依赖注入，这是 angularjs 背后的一个基本概念
在启动app前会保证外部函数存在。
它将增加更多的灵活性和对 Angular 中的 java 脚本函数的控制。
下面的 sn-p 将删除函数的外部访问并保护您的应用程序
这是向代码添加外部库（如 jquery loadash 或任何 js 库）的最佳方式

(function() {
  function exampleController(myFunction) {
    this.myFunction = function() {
      alert("Iam from angular controller");
    }
    this.externalJSFunction = myFunction
  };
  exampleController.$inject = ['myFunction'];
  
  function myFunctionFactory($window) {
    if (!$window.myFunction) {
      throw new Error("myFunction is not defined");
    }
    this.myFunction = $window.myFunction;
    /* You can add 
     $window.myFunction = undefined; 
     if the function ($window.myFunction) is not required by 
     some other library or function in window scope  
     in such cases it gives added security by 
     restricting access of this from window scope and dis allows modification
     */
    return this.myFunction;
  }
  myFunctionFactory.$inject = ['$window'];
  
  var app = angular.module("app", []);
  app.controller('exampleController', exampleController);
  app.factory('myFunction', myFunctionFactory);

})();
function myFunction() {
  alert("Iam from javascript");
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="app" ng-controller="exampleController as ctrl">
  <button ng-click="ctrl.myFunction()">click me For angular Function</button>
  <br/>
  <button ng-click="ctrl.externalJSFunction()">click me For external JS Function </button>
  <br/>
  <button onclick="myFunction()">click me for checking exteranl acess </button>
</div>

【讨论】：

@JimWsaysreinstateMonica 我不明白你的问题

【解决方案2】：

你的代码应该是这样的......

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script >
      var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name=function(){
alert("text");
}
});

    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div>
{{sample}}
</div>
<div><button ng-click="name()">click me</div>
  </body>

</html>

你需要先给 Angular js cdn，然后像上面一样创建一个模块和控制器

【讨论】：

不，这不是我期望的答案。我问有没有办法使用用 java 脚本编写的代码可以在 Angular JS html 文件中使用 @Sa E Chowdary

【解决方案3】：

这是一个示例控制器。

<body ng-app="myApp" ng-controller="myCtrl">
  <div>
    <button ng-click="name()">
  </div>
  <script>

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = name;
        function name(){
          alert("text");
        }
    });
  </script>
</body>

【讨论】：

这里你也在使用 angularjs 语法我需要在 angularJs 中使用纯 javascript 代码是否可能？ @Zohaib Ijaz
@DeepakVijay AngularJS 是 javascript。你可以在 Angular 中使用纯 js。
@DeepakVijay Angular 是 javascript。没有角度就不可能实现角度功能。

【解决方案4】：

你可以使用指令，这里是一个例子：

//在你的 JS 源中

angular.directive('something', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                alert('yup');
            });
        }
    };
}]);

// 在您的 HTML 文件中

<button type="button" something>Click Me!</button>

这使您可以很容易地在整个项目中重用各种代码块/函数。

另一种解决方案

<!DOCTYPE html>
    <html>
    
    <head>
      <title>example</title>
      <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    </head>
    
    <body ng-app="app" ng-controller="exampleController as ctrl">
      <button ng-click="ctrl.name()">click me to angular</button>
      <button ng-click="name()" class="btn">click me to javascript</button>
      <script>
        var app = angular.module("app", []);
        app.controller('exampleController', [function() {
          this.name = function() {
            alert("angular text");
          }
        }]);
    
        //JQuery Lib must be included your project 
        $(document).on('click', '.btn', function() {
          eval($(this).attr('ng-click'));
        });
    
        function name() {
          alert("javascript text");
        }
      </script>
    </body>
    
    </html>

【讨论】：

知道了..(Y) 感谢您的帮助@Shohel 并感谢

【解决方案5】：

您应该能够在 html 文件中的脚本标记内的角度控制器内运行任何 javascript。您的 html 文件应该看起来更像这样：

<!DOCTYPE html>
<html>
<head>
    <title>example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="exampleController as ctrl">
        <button ng-click="ctrl.name()">click me</button>
</body>
</html>


<script>
var app = angular.module("app", []);

app.controller('exampleController', [function() {
    this.name = function(){
        alert("text");
    }
}]);
</script>

【讨论】：

【解决方案6】：

创建一个服务层并将其粘贴到控制器中。现在，您可以在多个控制器中重复使用创建的函数。

为了实现， How can I call javascript function in AngularJS controller?

我希望这会有所帮助！

【讨论】：