Question

我需要在angularjs中运行此代码。

当我尝试执行此模型功能时，它没有运行。

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

那么在angularjs

中使用这个脚本文件的方法是什么？

以下是我在example.html中的代码

func createCollectionView() {
        let layout: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        layout.sectionInset = UIEdgeInsets(top: 15, left: 10, bottom: 10, right: 10)
        layout.itemSize = CGSize(width: view.frame.width, height: 50)

        cv = UICollectionView(frame: view.frame, collectionViewLayout: layout)
        cv.frame = CGRectMake(0, 50, view.frame.width, 250);
        cv.dataSource = self
        cv.delegate = self
        cv.registerNib(UINib(nibName: "cvCell", bundle: nil), forCellWithReuseIdentifier: "cell")
        cv.backgroundColor = UIColor.whiteColor()

        //suggested on other SO answers:
        cv.delaysContentTouches = false

        for view in cv.subviews {
            if view is UIScrollView {
                (view as? UIScrollView)!.delaysContentTouches = false
                break
            }
        }
    } 


//Button:
var onTap: ((cvCell) -> Void)?
    @IBAction func btn(sender: AnyObject) {
        onTap?(self)
    }

//CollectionView select:
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
   let cell = collectionView.dequeueReusableCellWithReuseIdentifier("cell", forIndexPath: indexPath) as! cvCell
  cell.btn.setTitle("follow", forState: .Normal)
}

Answer 1

如果我理解你的要求，

您需要执行单独的java脚本函数。

对于角度应用程序，不适合在角度范围内运行javascript。

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

＆＃13;

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

＆＃13;

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

＆＃13;

@Update

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

使用以下approch有一些优点： -

它会添加依赖注入，这是angularjs背后的基本概念
在启动应用程序之前，它将确保存在外部功能。
它将在angular。中添加更多灵活性和对java脚本函数的控制。
以下代码段将删除功能的外部访问并保护您的应用程序
这是您可以在代码中添加jquery loadash或任何js库等外部库的最佳方式

＆＃13;

(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");
}

＆＃13;

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

＆＃13;

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

你需要先给角度js cdn然后创建一个像上面那样的模块和控制器

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

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

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

Answer 6

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

实施， How can I call javascript function in AngularJS controller?

我希望这有帮助！

我怎样才能在angularjs中使用javascript代码

6 个答案: