Javascript jquery fancybox+；angularJS:fancybox按钮操作问题_Javascript_Jquery_Angularjs_Controller_Fancybox

Javascript jquery fancybox+；angularJS:fancybox按钮操作问题

javascript jquery angularjs

Javascript jquery fancybox+；angularJS:fancybox按钮操作问题,javascript,jquery,angularjs,controller,fancybox,Javascript,Jquery,Angularjs,Controller,Fancybox,我很好奇如何在fancybox中添加另一个按钮来做一些事情这显示了3个具有动态内容的Fancybox。但是，我对按钮有一个问题-不知道如何在按钮内部使用ng click=“doSomething（）执行任何操作，因为fancybox的html代码是在控制器范围之外生成的（如果我理解正确），并且无法从原始控制器访问以下是4个文件的代码： app.js var app = angular.module('plunker', []); app.controller('appController

我很好奇如何在fancybox中添加另一个按钮来做一些事情

这显示了3个具有动态内容的Fancybox。但是，我对按钮有一个问题-不知道如何在按钮内部使用

ng click=“doSomething（）

执行任何操作，因为fancybox的html代码是在控制器范围之外生成的（如果我理解正确），并且无法从原始控制器访问

以下是4个文件的代码：

app.js

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

app.controller('appController', ['$scope',
  function ControllerZero($scope) {

    $scope.items = [{
      'name': 'First Item',
      'description': 'first description'
    }, {
      'name': 'Second item',
      'description': 'second description'
    }, {
      'name': 'Third Item',
      'description': 'third description'
    }];
  }
]);

app.directive('fancybox', function ($compile, $http) {
    return {
        restrict: 'A',

        controller: function($scope) {
            $scope.openFancybox = function (url) {

                    $http.get(url).then(function(response) {
                        if (response.status == 200) {

                            var template = angular.element(response.data);
                            var compiledTemplate = $compile(template);
                            compiledTemplate($scope);

                            $.fancybox.open({ content: template, type: 'html' });
                        }
                    });
            };
        }
    };
});

index.html

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Fancybox</title>

    <link data-require="fancybox@2.1.4" data-semver="2.1.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css" />

    <script data-require="jquery@1.8.2" data-semver="1.8.2" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
    <script data-require="fancybox@2.1.4" data-semver="2.1.4" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.js"></script>
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>


    <link rel="stylesheet" href="style.css" />

    <script src="app.js"></script>
  </head>

  <body ng-controller="appController">

    <ul>
      <li ng-repeat="item in items">

        <div class="name">{{ item.name }}</div> 

          <div fancybox ng-click="openFancybox('template.html')" >Click here</div>

        </div>

      </li>
    </ul>
  </body>

</html>

template.html

<h2>{{item.description}}</h2>
<button ng-click="doSomething()">close this fancybox and write something into console</button>
<button>open the fancybox with the Second Item</button>

{{item.description}
关闭这个fancybox并在控制台中写入一些内容
打开带有第二项的fancybox

我在指令中更新了一些代码。请参阅

按照以下过程将视图与范围绑定：

//create an angular element. (this is our "view")
var element = angular.element(html),

//compile the view into a function.
compiled = $compile(element);

//DOM updation
body.append(element );

//bind our view to the scope!
compiled(scope);

所以我修改了你的fancybox指令

app.directive('fancybox', ['$compile', '$http',
  function($compile, $http) {
    return function($scope) {

      $scope.openFancybox = function(url) {
        $http.get(url).then(function(response) {
          if (response.status == 200) {

            var template = angular.element(response.data);
            var compiledTemplate = $compile(template);


            $.fancybox.open({
              content: template,
              type: 'html'
            });

           compiledTemplate($scope);
          }
        });
      }
    };
  }
]);

并在控制器作用域中添加doSomething（）函数

$scope.doSomething = function() {
 alert("do something.........");
};

$scope.doSomething = function() {
 alert("do something.........");
};