Question

模板html：

我在模板 seats.tpl.html 文件中有一个元素，如下所示：

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

控制器

进入控制器我调用工厂从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.");
                });

指令：

进入我的指令我使用参数 templateUrl 来调用模板文件，以便再次加载带有值的select负载。

.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 数组值时，我需要自动更新值，这在我当前的代码中不会发生。

我想念的指令，我认为是编译，是观察，是ngmodel，任何人都可以帮忙吗？

更新： 我调用一个函数从db获取新数据并将它们加载到select元素

 $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;

答：如果我在这里使用$ apply，我得到：错误：$ rootScope：inprog 行动已在进行中

        $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中。如果我使用$ timeout函数并尝试更改数据，则不会发生任何事情

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

Answer 1

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

内联模板 - 模板代码将在同一个HTML文件中定义，它将通过角度指令调用。
例如：

<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。

Answer 2

由于您的$http调用是异步的，因此您需要调用$scope.$apply来触发$digest周期以重新呈现指令视图：

$scope.$apply(function () {
   $scope.emptySeats = result.data;
});

$ apply（）用于从角度框架外部以角度执行表达式。（例如，来自浏览器DOM事件，setTimeout，XHR或第三方库）。

使用templateUrl更新指令元素值

2 个答案: