Question

howToUse.view.html

<div class="container-fluid">
    <div class="brif-box">
        <div class="hading cf">
            <h2>{{items.name}}</h2>
        </div>
        <p>{{items.description}}</p>
    </div>
    <my-responsive-tab info="items"></my-responsive-tab>
</div>

在该文件中项目是我的范围。

Controller.js

labcatControllers.controller('howTouseCtrl', ['$scope', '$routeParams', 'LibraryService',
function($scope, $routeParams, LibraryService){
    LibraryService.getItemDetails($routeParams.lId).then(function(data){
        $scope.items = data.data;
    });
}])

我的数据是

{"id":"3","name":"name","demo_url":"url","description":" Lorem ipsum ","html_content":"datasssss"}

directive.js

 .directive('myResponsiveTab', function($sce, $compile) {
    return {
        restrict: 'E',
        scope: {
            customerInfo: '=info'
        },
        templateUrl: 'view/how-to-use-my-custom-responsive-tab.html',
        link: function(scope, element, attrs) {
            console.log(scope.customerInfo)
            scope.names_ = $sce.trustAsResourceUrl(scope.customerInfo.demo_url);
            scope.$watch(attrs.info, function(newValue, oldValue) {
                    element.find("#horizontalTab").easyResponsiveTabs({
                        type: 'default',
                        width: 'auto',
                        fit: true,
                        closed: 'accordion',
                    });                    
            });
        }
    };
});

如何使用的，我的定制响应-tab.html

<div id="horizontalTab">
<ul class="resp-tabs-list">
    <li>PREVIEW</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JQUERY CODE</li>
    <li>FILES Require</li>
    <li>DOWNLOAD FILES</li>
</ul>
<div class="resp-tabs-container">
    <div>
        <iframe height="600px" width="100%" ng-src="{{names_}}"></iframe>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.htmlContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.cssContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.jqueryContent}}</span>
        </pre>
    </div>
    <div>
        <pre>
            <span class="codeIt">{{customerInfo.fileRequireContent}}</span>
        </pre>
    </div>
    <div>6</div>
</div>

在那错误：scope.customerInfo未定义。当我控制范围时，我看到范围为Object的customerInfo对象。当我的console.log（scope.customerInfo）未定义时。所以请告诉我我哪里错了。在此先感谢。

Answer 1

由于父控制器上的items是异步填充的，当指令已编译并且已链接时，items将为undefined。这意味着scope.customerInfo也将是未定义的。

你可以做的是使用手表等到它第一次有一个值，并在它做的时候做所有事情。将您的指令代码更改为：

.directive('myResponsiveTab', function($sce, $compile) {
    return {
        restrict: 'E',
        scope: {
            customerInfo: '=info'
        },
        templateUrl: 'view/how-to-use-my-custom-responsive-tab.html',
        link: function(scope, element, attrs) {
            var deregWatch = scope.$watch('customerInfo', function(newValue, oldValue) {
                if (newValue) {
                    deregWatch(); // stop watching now we have a value
                    scope.names_ = $sce.trustAsResourceUrl(scope.customerInfo.demo_url);
                    element.find("#horizontalTab").easyResponsiveTabs({
                        type: 'default',
                        width: 'auto',
                        fit: true,
                        closed: 'accordion',
                    });   
                }                 
            });
        }
    };
});

注意：如果您需要检测info对象的更改，则需要继续观察它，这样您就可以在每次更改时重新初始化您的指令。否则，请移开手表以尽可能快地保持摘要周期。

Answer 2

通过在指令的元素上使用ng-if="items"，angular将等待呈现它，直到您在items中有一个值，并且在到达link时它将不会被定义。< / p>

要在link或controller中为指令呈现HTML，请执行以下操作：

scope.myHtml = $sce.trustAsHtml(customerInfo.htmlContent);

在你的模板中（类似这样）：

<span ng-bind="myHtml" class="codeIt"></span>

范围值确实得到指令和模板AngularJS的链接功能

2 个答案: