blocks|key|4623183|text|这在老版本的UI-Bootstrap+0.10.0+.Even最新版本中是可能的，它对我来说是有效的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4623184|index.html|4623185|++++
<script+src="bower_components/angular-bootstrap/ui-bootstrap.min.js">
</script>
<script+src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">
</script>



<script+type="text/ng-template"+id="myTestModal.tmpl.html">
++++<div+class="modal-header">
++++++++<h3>Modal+Header</h3>
++++</div>+++

++++<div+class="modal-body">
++++++++<p>Modal+Body</p>
++++</div>

++++<div+class="modal-footer">
++++++++<button+type="button"+class="btn+btn-default"+ng-click="close()"+data-dismiss="modal">Close
++++++++</button>
++++++++<button+type="button"+class="btn+btn-primary"+ng-click="doSomething()">Do+Something
++++++++</button>
++++</div>+
</script>|code-block|syntax|javascript|4623186|modalDemoController.js|4623187|$scope.openModal=function(){
++++$scope.modalInstance=$modal.open({
++++++++templateUrl:+'myTestModal.tmpl.html',
++++++++scope:$scope
++++});
}

$scope.close=function(){
++++$scope.modalInstance.dismiss();//$scope.modalInstance.close()+also+works+I+think
};

$scope.doSomething=function(){
++++//any+actions+to+take+place
++++console.log("Do+Something");
}|4623188|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>It was possible in older version of UI-Bootstrap 0.10.0 .Even latest version,it works for me</p>

<h2>index.html</h2>

<pre><code>&lt;!-- if you are using Bower --&gt;    
&lt;script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"&gt;
&lt;/script&gt;
&lt;script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"&gt;
&lt;/script&gt;

&lt;!-- modal --&gt;
&lt;!-- look at 'type' and 'id' values --&gt;
&lt;script type="text/ng-template" id="myTestModal.tmpl.html"&gt;
    &lt;div class="modal-header"&gt;
        &lt;h3&gt;Modal Header&lt;/h3&gt;
    &lt;/div&gt;   

    &lt;div class="modal-body"&gt;
        &lt;p&gt;Modal Body&lt;/p&gt;
    &lt;/div&gt;

    &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" ng-click="close()" data-dismiss="modal"&gt;Close
        &lt;/button&gt;
        &lt;button type="button" class="btn btn-primary" ng-click="doSomething()"&gt;Do Something
        &lt;/button&gt;
    &lt;/div&gt; 
&lt;/script&gt;
</code></pre>

<h2>modalDemoController.js</h2>

<pre><code>$scope.openModal=function(){
    $scope.modalInstance=$modal.open({
        templateUrl: 'myTestModal.tmpl.html',
        scope:$scope
    });
}

$scope.close=function(){
    $scope.modalInstance.dismiss();//$scope.modalInstance.close() also works I think
};

$scope.doSomething=function(){
    //any actions to take place
    console.log("Do Something");
}
</code></pre>


blocks|key|117412|text|我还没有找到一个干净的解决方案，我发现的最好的解决办法是，避免编写相同的代码两次，就是像这样扩展模式控制器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|117413|$.extend(this,+$controller('NormalCtrl',+{$scope:+$scope}));|code-block|syntax|javascript|117414|全控制器：|117415|.controller('ModalCtrl',+['$scope',+'$controller',+'$modalInstance',+
function+($scope,+$controller,+$modalInstance)+{
++++//with+this+line+here:
++++//+Initialize+the+super+class+and+extend+it.
++++$.extend(this,+$controller('NormalCtrl',+{$scope:+$scope}));

++++//+Opens+a+search+result
++++$scope.openResult+=+function()+{
++++++++$modalInstance.close($scope.selectedRow);
++++};

++++//+Called+when+the+cancel+button+is+pressed
++++$scope.back+=+function()+{
++++++++$modalInstance.dismiss('cancel');
++++};

}]);|117416|这样，我可以重用相同的代码，而不必重新编写它，并且我可以覆盖我想要与原始控制器不同的函数。|117417|希望我在那里帮助了一些人|117418|亚历克斯|117419|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I haven't found a clean solution yet, the best workaround I found, to avoid writing the same code twice was to extend the modal controller like this:</p>

<pre><code>$.extend(this, $controller('NormalCtrl', {$scope: $scope}));
</code></pre>

<p>full controller:</p>

<pre><code>.controller('ModalCtrl', ['$scope', '$controller', '$modalInstance', 
function ($scope, $controller, $modalInstance) {
    //with this line here:
    // Initialize the super class and extend it.
    $.extend(this, $controller('NormalCtrl', {$scope: $scope}));

    // Opens a search result
    $scope.openResult = function() {
        $modalInstance.close($scope.selectedRow);
    };

    // Called when the cancel button is pressed
    $scope.back = function() {
        $modalInstance.dismiss('cancel');
    };

}]);
</code></pre>

<p>That way, I can re-use the same code, without having to rewrite it all over again and I can override the functions that I want to do smth different to the original controller. </p>

<p>Hope I helped some people out there,</p>

<p>Alex</p>


blocks|key|117469|text|只需编写一个函数，而不是创建新文件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|117470|+$scope.yourModal=+function+(data)+{
+++var+modalInstance+=+$modal.open({
+++++template:+'<div>Do+you+really+want+to+hurt+me?+<div><button+class="btn"+ng-click="hurt(data)">Yes</button></div></div>',
+++++controller:+function($scope,+scope){
++++++++$scope+=+scope;
+++++},
+++++resolve:+{
+++++++++scope:+function+()+{
++++++++++++return+$scope;
+++++++++}
+++++},
+++++size:+'sm'
+++});++
+}

+$scope.hurt+=+function(data){
+++++console.log(data);
+}|code-block|syntax|javascript|117471|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Just write a function instead of creating new file:</p>

<pre><code> $scope.yourModal= function (data) {
   var modalInstance = $modal.open({
     template: '&lt;div&gt;Do you really want to hurt me? &lt;div&gt;&lt;button class="btn" ng-click="hurt(data)"&gt;Yes&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;',
     controller: function($scope, scope){
        $scope = scope;
     },
     resolve: {
         scope: function () {
            return $scope;
         }
     },
     size: 'sm'
   });  
 }

 $scope.hurt = function(data){
     console.log(data);
 }
</code></pre>


<p>plunk: <a href="http://plnkr.co/edit/85Wl5W">http://plnkr.co/edit/85Wl5W</a> If I use the $modalInstance on the same controller(modalController.js), without being in a modal, angular gets frozen. </p>

<p>I just want to simplify my life using angularjs with the angular-ui bootstrap modal service. I want to use the same controller on a separate file, but on a modal as well. That is, I want them to do the same task. Is there any proper way to do it? </p>

<p>E.g. modal.html, modalController.js. I want to show these on a modal window, but on my application as well without a modal. The issue is that if I use the same controller I can't inject the $modalInstance, as it's undefined if there's no modal. </p>

<p>Thanks in advance,</p>

<p>Alex </p>


Angular-ui bootstrap modal without creating new controller

plunk：如果我在同一控制器(modalController.js)上使用$modalInstance，而不是在模式中，angular就会冻结。我只想通过angular-ui bootstrap模式服务使用angularjs来简化我的工作。我想在一个单独的文件上使用相同的控制器，但在一个模式上也是如此。也就是说，我希...

问无需创建新控制器的Angular-ui引导模式
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无需创建新控制器的Angular-ui引导模式EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无需创建新控制器的Angular-ui引导模式
EN