Question

所以我经过多次辩论后决定将我的网页分成两部分，一部分用于ie7，另一部分用于ie8 +。我有很多

<!-- if lte ie7--->

散落在周围，我只想尽可能地分开html。当然，它的维护费用更高，但是更好。

因此，当我将html内容从main.html移至submain.html时，我注意到我的一个自定义指令无法正常工作。

注意：加载html内容后，我的所有javascript都会被加载。

我有一个名为ng-map的指令，如果此属性出现在任何带有ID的div上，它会调用mapquest以使用交互式地图填充div。目前这有效。

但是，如果我移动指令：

<div ng-map id="map"></div>

从main.html中将其放入submain.html并在main.html中添加：

<div ng-include="'view/submain.html'">

即使我的submain.html正确加载，它也无法正常工作。

它给了我错误：＆＃34;错误：对象＃没有方法＆＃39; initMap＆＃39;＆＃34;

这是我的指示：

mapapp.app.directive('ngMap', ['logger', '$http', function (logger, $http) {
    var directiveDefinitionObject = {
        restrict: 'A',
        controller: function link($scope, $element) {
            $scope.shouldMapLoadOnPageLoad = true;

            $scope.loadCodeAndMap =
                function () {
                    var key = {...};
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = "http://www.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=" + key;
                    document.body.appendChild(script);
                };
            $scope.loadCodeAndMap();
            $scope.initMap = function () {
               ...
            }
        }
    };
    return (directiveDefinitionObject);
}]);

理解这里发生的事情的任何帮助都表示赞赏。

Answer 1

好的想通了，但我没有完全理解。

当我加载我的html内容，控制器和指令时，我能够从我的控制器上的$ watch调用位于我的指令中的$ scope.initMap函数。

所以这很有效：

控制器：

$scope.$watch('blahData', function(newVal, oldVal) {
    $scope.initMap();
}

指令：

$scope.initMap = function() { .. }

然而，当我通过ajax更改我的html加载时（我假设ng-includes从某个位置获取html的内容，你需要更改上面的逻辑。

所以之前的html就是这样的：

<html><head></head>
<body>
    <!-- Stuff -->        

    <div>Hello!</div>

    <!-- More Stuff --> 
</body></html>

到

<html><head></head>
<body>
    <!-- Stuff -->        

    <!-- Home.html has <div>Hello!</div> -->
    <div ng-include="'Template/Home.html'" />

    <!-- More Stuff --> 
</body></html>

然后控制器变成这样：

$scope.initMap = false; //not a function anymore
$scope.$watch('blahData', function(newVal, oldVal){
    $scope.initMap = !$scope.initMap;
}

并且指令变为：

$scope.$watch('$scope.initMap', function() { ... }

因此该指令现在监视从控制器发生的数据。现在，如果您的指令不包含范围：'='作为指令选项，那么您必须作为父级访问控制器作用域：

$scope.$watch('$scope.$parent.initMap, function() { ... }

那是因为scope：'='将指令的本地$ scope绑定到父作用域（控制器）。

当使用ng-include＆＃34; Object＃<scope>时，AngularJS自定义指令无法正常工作没有方法＆＃34; </scope>

1 个答案: