web-dev-qa-db-fra.com

Comment utiliser le code javascript dans angularjs

Je dois exécuter ce code dans angularjs. 

Lorsque j'essaie d'exécuter cette fonction de modèle, elle n'est pas en cours d'exécution.

Il ne montre même pas d'alerte ou de console.

Alors, comment utiliser ces fichiers de script dans angularjs

Voici mon code dans example.html

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

Si je comprends bien votre besoin,

Vous devez exécuter une fonction de script Java distincte.

Pour une application angulaire, ce n’est pas un moyen approprié d’exécuter javascript en dehors de la portée de angular.

si vous en avez absolument besoin, vous pouvez essayer de remplacer ng-click="name()" par 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>

@Mettre à jour  

Si vous voulez utiliser une bibliothèque de scripts Java, une fonction ou des constantes dans angularjs, je vous suggère d’ajouter une fabrique ou un service garantissant la bibliothèque, la fonction ou les constantes, mais la solution proposée n’est pas simple. dessus de la solution

Il y a quelques avantages à utiliser l'approche suivante: -

  1. Cela ajoutera une injection de dépendance, ce qui est un concept de base derrière angularjs

  2. Cela garantira que la fonction externe existe avant de démarrer l'application.

  3. Cela ajoutera plus de flexibilité et de contrôle sur la fonction de script Java en mode angulaire.

  4. L'extrait ci-dessous supprimera l'accès externe à la fonction et sécurisera votre application 
  5. C’est le meilleur moyen d’ajouter à votre code des bibliothèques externes telles que jquery loadash ou n’importe quelle bibliothèque 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>

8
Samuel J Mathew

votre code devrait être comme ça .... 

<!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="[email protected]" 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>

Vous devez d'abord donner angular js cdn puis créer un module et un contrôleur comme ci-dessus 

2
Sa E Chowdary

Vous pouvez utiliser une directive, voici un exemple:

// dans votre source JS 

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

// dans votre fichier HTML 

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

Cela vous permet de réutiliser facilement vos divers morceaux de code/fonctions dans l'ensemble de votre projet.

Une autre solution 

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

2
Shohel

Voici un exemple de contrôleur.

<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>
2
Zohaib Ijaz

Vous devriez être capable d'exécuter n'importe quel javascript à l'intérieur d'un contrôleur angulaire à l'intérieur d'une balise de script dans un fichier html . Votre fichier html devrait ressembler à quelque chose de ce genre:

<!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>
0
Max Crane

Créez une couche de service et collez-la à l'intérieur du contrôleur. Maintenant, vous pouvez réutiliser la fonction créée dans plusieurs contrôleurs.

Pour la mise en œuvre, Comment appeler la fonction javascript dans le contrôleur AngularJS?

J'espère que ça aide!

0
imbond