Angularjs和SemanticUI问题

时间:2017-08-23 19:25:37

标签: jquery angularjs semantic-ui

我正在一个项目中工作,我们正在使用Angularjs和semantic-ui,但是当一个模态弹出式语义 - ui不允许我显示来自Angular的信息时。

示例:Varnish

<div ng-app='app' ng-controller='controller'>
  <button class='ui button blue' ng-click="hello()"><i class="write icon"></i>Test</button>
</div>

<div class="ui test modal" >
    <i class="close icon"></i>
    <div class="header">TEST</div>
    <div class="content">
        {{testing}}
    </div>
    <div class="actions">
        <div class="ui black button">
            Cancel
        </div>
        <div class="ui positive right labeled icon button">
            Save
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>

var app = angular.module('app', []);
app.controller('controller', ['$scope', '$http', '$filter', function($scope, $http, $filter) {
  $scope.hello = function() {
    $scope.testing="It's working";
    $('.ui.modal').modal('show');
  }
}]);

1 个答案:

答案 0 :(得分:1)

您需要将模态放在控制器div中。像这样。

演示: here

<强>代码:

<div ng-app='app' ng-controller='controller'>
  <button class='ui button blue' ng-click="hello()"><i class="write icon"></i>Test</button>

  <div class="ui test modal" >
    <i class="close icon"></i>
    <div class="header">TEST</div>
    <div class="content">
        {{testing}}
    </div>
    <div class="actions">
        <div class="ui black button">
            Cancel
        </div>
        <div class="ui positive right labeled icon button">
            Save
            <i class="checkmark icon"></i>
        </div>
    </div>
</div>


</div>