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

Question

我很好奇如何在 fancybox 中添加另一个按钮来执行某些操作。

here is the code http://plnkr.co/edit/fHTfBpfHGspOO3BTlgYA?p=preview 显示 3 个带有动态内容的花式框。但是我遇到了按钮问题 - 不知道如何在按钮内使用 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>

style.css

/* Put your css in here */

li {list-style-type: none; border: 1px solid #efefef; width:200px; margin-bottom:10px; padding:10px;}
li div {display: inline-block; width:90px; color: grey;}
li div.name {color: black; font-weight: bold;}

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>

Answer 1

我更新了指令中的一些代码。见 plunker

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

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

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

jquery fancybox + angularJS: fancybox button action issue

javascript

jquery

controller

fancybox

angularjs