Question

我正在构建一个角度应用程序，我正在尝试将数据从我的控制器传递到模态。

在我的索引页面上，我有这个HTML：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
...
</head>
<body ng-controller="myCtrl">

<a href="" data-toggle="modal" data-target="#myModal" ng-click="callModal({{mydata.test}})">
click here
</a>

</body>
</html>

对于我的控制器：

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

myApp.controller('JobListCtrl', ['$scope', '$element', '$http', '$log', function ($scope, $element, $http, $log,) {

    $scope.callModal = function(test){
        $scope.test = test;
    }

}]);

我的指示：

myApp.directive('myModal', ['$rootScope', '$log', '$http', function ($rootScope, $log, $http) {
  return {
    restrict: 'E',

    templateUrl: 'modal-tpl',

    replace: true,

    transclude: true,

    link: function (scope) {

    }
  };
}]);

这是我模态的模板：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-content ease">
    <section>
      {{test}}
    </section>
  </div>
  <div class="modal-overlay ease" data-dismiss="modal"></div>
</div>

如何将mydata.test的值传递给模态？我已经看过使用angularUI的解决方案，我知道它们有效，但我不想将模板用于模态。有没有人有其他解决方案？非常感谢

Answer 1

http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

angularJs具有与指令

的隔离范围希望它能帮到你!!

Answer 2

只是一个小评论：使用角度指令时，使用角度模型的双花括号是额外的。所以，而不是写：纳克单击=＆＃34; callModal（{{mydata.test}}）使用：纳克单击=＆＃34; callModal（mydata.test）

在没有angularUI的情况下将数据传递给模态

2 个答案: