在html元素中的ng-if屬性的控制器中的訪問值

Question

我有一個現有的模塊，我得到，我添加一個指令，加載包含模態窗口的外部文件，我將模態的初始值設置爲true：

var application = angular.module('app'); 
application.directive("history", function() { 
    return { 
     templateUrl: "dir/dir/dir/file.html" 
    }; 
}); 
application.controller("factoryController", function ($scope) { 
    $scope.ShowModal = true; 
}); 

在我的HTML我有我的模式窗口，我想創建窗口，當我的控制器中的ShowModal屬性爲true。如何在HTML中訪問該屬性？我試過這個：

<div ng-if="ShowModal" id="modal" class="modal" > 

但這似乎不起作用。這看起來很簡單，但我對角度j相當陌生，所以任何幫助都會很棒！

Answer 1

要調用新指令，請使用與新指令相同的標記名稱創建HTML元素。

命名一個指令時，必須使用駱駝案例名稱myHistory，但是在調用它時，必須使用 - 分隔名稱，my-history。您可以通過在視圖中使用多種方法來調用指令，一。所以，試試這個：

JS：

var application = angular.module('app'); 
    application.directive('modalDialog', function($rootScope) { 
    return { 
     restrict: 'E', 
     scope: { 
      show: '=', 
      close: '=' 
     }, 
     replace: true, 
     transclude: true, 
     link: function(scope, element, attrs) { 
      scope.dialogStyle = {}; 
      scope.dialogStyle.width = '500px'; 
      if (attrs.width) scope.dialogStyle.width = attrs.width; 
      if (attrs.height) scope.dialogStyle.height = attrs.height; 
      if (attrs.header) scope.dialogHeader = attrs.header; 
      if (attrs.content) scope.dialogContent = attrs.content; 
      if (attrs.closeText) scope.closeText = attrs.closeText; 
      scope.hideModal = function() { 
       scope.show = false; 
      }; 
      scope.$watch('show',function(value){ 
       if(value==true){ 
        $rootScope.noScroll = true; 
       }else{ 
        $rootScope.noScroll = false; 
       } 
      }) 
     }, 
     template: "<div class='ng-modal' ng-show='show'><div class='ng-modal-overlay'></div><div class='ng-modal-dialog' ng-style='dialogStyle'><span ng-if='close==true' class='ng-modal-close' ng-click='hideModal()'>X</span><h2 class='ng-modal-header' ng-if='dialogHeader'>{{dialogHeader}}</h2><div class='ng-modal-dialog-content'><p ng-if='dialogContent'>{{dialogContent}}</p><ng-transclude></ng-transclude><button type='button' ng-click='hideModal()' ng-if='closeText'>{{closeText}}</button></div></div></div>" 
    } 
}); 
    application.controller("factoryController", function ($scope) { 
     $scope.ShowModal = true; 
    }); 

HTML：

<modal-dialog show="ShowModal" ></modal-dialog> 

用法示例：

<modal-dialog show="fileTypeError" header="Warning" close="true"> 
    <p>{{fileTypeError}}</p> 
    <button type="button" ng-click="closefilePopup()" class="btn_approve1 none">Ok</button> 
</modal-dialog>