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

我有一個現有的模塊，我得到，我添加一個指令，加載包含模態窗口的外部文件，我將模態的初始值設置爲true：在html元素中的ng-if屬性的控制器中的訪問值

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相當陌生，所以任何幫助都會很棒！

來源

2017-07-07 SQL and Java Learner

您可以直接使用NG-包括=」「目錄/二r/dir/file.html'「 – Vivz

好吧，我將在稍後添加到我的指令中。我所擁有的僅僅是獲得模態顯示所需的基礎。你知道如何獲得這個價值嗎？我試圖將這個值放在一個對象中以保持範圍，但這也不起作用。 –

我已經爲您的要求發佈了一個答案 – Vivz

要調用新指令，請使用與新指令相同的標記名稱創建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>

來源

2017-07-07 14:48:32 Vivz

這沒有奏效。我已經加倍檢查了我的語法，但是模態沒有出現。 –

我更新了我的答案，以獲得更加動態的彈出窗口。您可以將模板網址的html代碼放置在模態dailog中，並將其設置爲您的要求。 – Vivz

我將代碼更改爲該指令並更改了html標記，但仍沒有顯示任何內容。 –

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

回答

相關問題