Question

我正处于AngularJS边做边学的阶段，我无法弄明白，也无法找到答案。

我在做什么：

在ng-click上我调用我的控制器中的一个函数，$ http-loads html-content（一些div和一个表单），我粘贴＆＃34;到我模板中div内的ng-bind-html。

该工作正常 - 但我的问题是，我无法在加载的数据中为ng-models或{{someText}}设置值。我得到了＃34;未定义＆＃34; div中的元素（带有随机内容的modal-div，因此不是我模板的静态部分）。

我没有使用Bootstrap或类似的东西。

我可以做些什么来使数据成为我的范围的一部分 - 或以另一种方式实现我想要的东西（具有随机内容的模态div）？

我可以发布一些代码，如果这对你有任何帮助的话。当你回答时请记住，我是一个全新的人！： - ）

-

我的指示：

workApp.directive('modalDialog', function() {  
    return {  
        restrict: 'E',  
        scope: {  
            show: '='  
        },  
        transclude: true,  
        link: function(scope, element, attrs) {  
            scope.dialogStyle = {};  
            if (attrs.boxWidth) scope.dialogStyle.width = attrs.boxWidth;  
            if (attrs.boxHeight) scope.dialogStyle.height = attrs.boxHeight;  
            scope.hideModal = function() {  
                scope.show = false;  
            };  
        },  
        templateUrl: 'app/tpl/modal.html'  
    };  
});

国：

.state('main', {  
    abstract: true,
    templateUrl: tplMain  
})  

    // PROJECTS

    .state('main.projects', {  
        url: '/projects',
        templateUrl: 'app/views/projects/project-list.html',  
        controller: 'projectListCtrl'  
    })  

    .state('main.projectdetails', {  
        url: '/projects/:projectId/details',  
        templateUrl: 'app/views/projects/project-details.html',  
        controller: 'projectDetailsCtrl'  
    })

HTML（嵌套视图）：

<!-- main -->
<div ui-view>   
    <!-- main.projects -->  
    <div ui-view>
        <a ng-click="newProject()">New project</a>
    </div>
</div>
<modal-dialog>{{message}}</modal-dialog>

控制器：

workApp.controller('projectListCtrl', function($scope, $rootScope, $http) {
    $scope.newProject = function() {
        $scope.message = '<div>Some HTML here...</div>'; // Loaded from $http.get
        $scope.modalOpen = true;
    }
});

我的两个问题中的第一个是，当我调用newProject（）时，模态没有显示。我认为这是因为状态/嵌套视图（我的模态对话框在另一个视图中）？如果我将模态对话框复制到我的main.projects状态就可以了。

第二个问题是{{message}}无法包含绑定，因此我无法绑定fx。 HTML中的$ scope.modal.title到{{modal.title}}。

更新

我找到了一个动态包含html文件的工作示例：

<div id="modal" ng-class="{ open: modal.data.visible }" ng-include="'app/views/' + modal.data.include"></div>

在控制器中：

$scope.modal.data = {  
    include: 'projects/project-data.html',  
    visible: true,  
    title: 'New project',  
    subtitle: 'Enter project data',  
    projectName: 'My first project',  
    projectCompany: 'The Project Company'  
}

这似乎运作得很好 - 但这是不好的做法而不是指令（我仍然无法开始工作）。

Answer 1

如果我理解你的用例，你只是想在html和你的模态之间传递数据。这是Plunker我发现你可以查看。我做过类似的事情，指令是我找到的最佳解决方案。

<强> HTML

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

 <head>
  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.2" data-require="bootstrap@*" />
  <script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" data-semver="3.3.2" data-require="bootstrap@*"></script>
  <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
 </head>

  <body ng-controller="indexCtrl">
  <h4 style="margin-left: 10px;margin-top: 20px;">Display a modal dialog with AngularJS</h4>
  <hr />
  <button ng-click="toggleModal()" class='btn btn-warning btn-sm' style="margin: 5px 0px 10px 10px;width: 150px;">Open Modal</button><br />

  <!-- Angular JS Directive Modal -->
  <modal-dialog box-width="400px" box-height="150px" show="modalShown">
    <div class="row">
      <div class="col-md-12">
        <h3>Header</h3>
        <hr style="border-top:1px solid darkblue"/>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <!-- This is an important message -->
        {{message}}
      </div>
    </div>
  </modal-dialog>
</body>

</html>

<强> modalDialog.html

<div class='ng-modal' ng-show='show'>
  <div class='ng-modal-overlay' ng-click='hideModal()'></div>
  <div class='ng-modal-dialog' ng-style='dialogStyle'>
    <div class='ng-modal-close' ng-click='hideModal()'>X</div>
    <div class='ng-modal-dialog-content' ng-transclude></div>
  </div>
</div>

<强>的script.js

    angular.module('app', []);

angular.module('app').controller('indexCtrl', function($scope) {
  $scope.modalShown = false;
  $scope.message= "This is an important message!"
  $scope.toggleModal = function() {
    $scope.modalShown = !$scope.modalShown;
  };
});

angular.module('app').directive('modalDialog', function() {
  return {
    restrict: 'E',
    scope: {
      show: '='
    },
    transclude: true, // Insert custom content inside the directive
    link: function(scope, element, attrs) {
      scope.dialogStyle = {};
      if (attrs.boxWidth) {
        scope.dialogStyle.width = attrs.boxWidth;
      }
      if (attrs.boxHeight) {
        scope.dialogStyle.height = attrs.boxHeight;
      }
      scope.hideModal = function() {
        scope.show = false;
      };
    },
    templateUrl: 'modalDialog.html'
  };
});

<强> CSS

/* Styles go here */
.ng-modal-overlay {
  /* A dark translucent div that covers the whole screen */
  position:absolute;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#808080;
  opacity: 0.8;
}

.ng-modal-dialog {
  background-color: #fff;
  box-shadow: 10px 10px #595554;
  border-radius: 4px;
  z-index:10000;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.ng-modal-dialog-content {
  padding:10px;
  text-align: left;
}

.ng-modal-close {
  position: absolute;
  top: 3px;
  right: 5px;
  padding: 5px;
  cursor: pointer;
  font-size: 120%;
  display: inline-block;
  font-weight: bold;
  font-family: 'arial', 'sans-serif';
}

Angularjs弹出/模态内容

1 个答案: