如何从.factory中调用控制器中包含的函数?

时间:2017-09-30 04:16:48

标签: javascript angularjs

在我的代码中,我正在尝试使用泛型函数,当我传递我的控制器中的函数名称并从工厂运行时。

app.factory('myfactory', function () {

    return {
      create: function (name_of_function) {

        angular.element(document.body).append('<button ng-click="'+name_of_function+'">trigger my function</button>') 

          return "";
      }
    };
  });

创建:功能( name_of_function ){

我传递了我的函数名称,这样当我点击按钮时执行我在控制器中的函数。

function HelloCtrl($scope, myfactory) {
  //name of my function
  myfactory.create("myfunction()");
  $scope.myfunction=function(){
    alert("it works")
  }
}

怎么做呢?

https://plnkr.co/edit/z6s129TQ82REyCDscJTq?p=preview

1 个答案:

答案 0 :(得分:0)

你可以这样做:

您的工厂可能会返回要将其附加到正文的html字符串。在控制器中,您可以将html附加到正文。在追加之前,你需要编译你的html字符串。

&#13;
&#13;
//angular.js Concrete Factory example

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

// Concrete Factory
app.factory('myfactory', function () {

    
  return {
    create: function (name_of_function) {
  
         return '<button ng-click="'+name_of_function+'">trigger my function</button>';

      }
  };
});


function HelloCtrl($scope, myfactory,$compile) {
 
  
  angular.element(document.body).append($compile(myfactory.create("myfunction()"))($scope))


  $scope.myfunction=function(){
    alert("it works")
  }
}
&#13;
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.2/angular.js"></script>
  
  <script src="app.js"></script>
</head>

<body>
  <div ng-controller="HelloCtrl">
    
  </div>
  <br />

</body>

</html>
&#13;
&#13;
&#13;