使用templateUrl更新指令元素值-Java 学习之路

template html:

我有一个元素到模板 seats.tpl.html 文件，像这样：

<select  id="guest_table">
    <option tables="emptySeats"
            ng-repeat="table in emptySeats" value="{{table.tableId}}">{{table.tableNumber}}</option>
</select>

controller

进入控制器我调用工厂从dbase获取值，实际上我将结果加载到 $scope.emptySeats 数组中，使用ng-repeat进入模板创建：

factP3_GetEmptyChairs.getEmptyChairs({'data': {'id': 58}})
                .then(function (result) {
                    **$scope.emptySeats = result.data;**
                    $log.info("Empty chairs list loaded.");
                },
                function (result) {
                    $('.loading').hide();
                    $log.error("Error: we could not get Empty seats list.");
                });

directive:

进入我的指令我使用参数 templateUrl 来调用模板文件，以便加载，再次到目前为止这么好，选择加载值 .

.directive('emptySeats',function(){
        return {
            restrict: 'AE',
            replace: true,
            scope:{tables :'='},
            templateUrl: function(){
                return 'assets/modules/part3/templates/emptySeats.tpl.html';
            },

            link:function(scope, element, attrs) {                                                                           
                //bind change on element
                element.bind('change', function() {
                    alert("table changed");
                });

            }
        }

我的问题是每当我更改 $scope.emptySeats 数组值时，我需要自动更新值，这在我当前的代码中不会发生 .

something i miss into the directive i think , is it compile, is it observe, is it ngmodel, can anyone help?

UPDATED: i call a function to get new data from db and load them to select element

$scope.onClickHall = function (hall) {
    var tmp = [];
    //call service to load empty Seats
    factP3_GetEmptyChairs.getEmptyChairs({'data': {'id': $scope.currentHall}})
        .then(function (result) {
            //$scope.emptySeats = result.data;

A: If i use $apply here,i get : Error: $rootScope:inprog Action Already In Progress

$scope.$apply(function () {
                $scope.emptySeats = result.data;;
            });
            tmp = result.data; //i use a temp array to pass it on timeout

            $log.info("Empty chairs list loaded.");
        },
        function (result) {
            $('.loading').hide();
            $log.error("Error: we could not get Empty seats list.");
        });

B. if i use $timeout function and try to change the data , nothing happens

$timeout(function() {
        $scope.$apply(function () {
            $scope.emptySeats = tmp;
        });
    }, 10);
}

2 回答

最好使用模板文件来增强引导程序弹出窗口，工具提示等功能 . 有两种类型的模板可用于此目的 .

内联模板 - 模板代码将在同一HTML文件中定义，它将通过angular指令调用 .
例：

<script type="text/ng-template" id="myTemplate.html">
   <h1>Hi</h1>
</script>

模板内容可以在外部文件中定义，可以作为ajax请求调用 . 在这种方法中，您可能需要使用类似于 $http.get(templateURL) 的ajax调用

直接定义应定义如下，以便corerctly附加模板 . 注意使用 $compile 以正确集成内容 . 这将确保内容正确地集成到您的指令内容中 .

在下面找一个例子 .

angular.module('myApp')
      .directive('myPopover', function () {
        var getTemplate = function () {
            var template = '';
                template = $templateCache.get("myTemplate.html");
            }
            return template;
        };

    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@myPopover'
      },
      link: function(scope, element, attrs) {
            var popOverContent = getTemplate();
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);

            var options = {
                //title       : title,
                content     : popOverContent,
                placement   : "right",
                html        : true,
                date        : scope.date,
                trigger     : "hover"
            };
            $(element).popover(options);
      }
    };
  });

这是一个工作plunker .

回复于 2024-04-25T08:24:47+08:00

0
由于 $http 调用是异步的，因此需要调用$scope.$apply来触发 $digest 循环以重新呈现指令视图：
```
$scope.$apply(function () {
   $scope.emptySeats = result.data;
});
```
$ apply（）用于从角度框架外部以角度执行表达式 . （例如，来自浏览器DOM事件，setTimeout，XHR或第三方库） .
回复于 2024-04-25T08:24:47+08:00

使用templateUrl更新指令元素值

2 回答

相关问题