使用 templateUrl 更新指令元素值

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 来调用模板文件以加载，到目前为止还不错，选择加载了值。

.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，有人可以帮忙吗？

更新： 我调用一个函数从数据库中获取新数据并将它们加载到选择元素

 $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 文件中定义，并由 angular 指令调用。
例子：

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

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

为了正确附加模板，指令定义应定义如下。请注意使用$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() 用于从 Angular 框架外部执行 Angular 表达式。 （例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。