angularjs显示/隐藏标签

Question

这里我使用angularjs和bootstrap显示数组中的选项卡。 我想要的是当我点击特定标签时它应该只显示该标签的内容。

即（当我点击dynamic-2时，我想显示动态2的内容并隐藏dynamic-1和dynamic-3选项卡的内容）

现在我正在获取点击所有标签的内容。

js文件

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    exclude-result-prefixes="xs"
    version="1.0">


    <xsl:key name="keycode" match="childTag" use="code"/>

    <xsl:template match="parentTag">
        <xsl:copy>
        <xsl:for-each select="childTag[generate-id() = generate-id(key('keycode', code)[1])]">
        <childTag>
            <xsl:copy-of select="code"/>
            <xsl:variable name="currentcode" select="normalize-space(code)"/>
            <xsl:for-each select="key('keycode', $currentcode)">
                <status>
                    <xsl:copy-of select="date|oldStatus|newStatus"/>
                </status>
            </xsl:for-each>
        </childTag>
        </xsl:for-each>            
        </xsl:copy>
    </xsl:template>

    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

html文件        

 var items=[
                          {
                                Name:"tab1",
                                id:1,
                                content:"FirstTab",
                                title:"Dynamic-1",
                                templateUrl:"first.html"

                               },

                               {
                                Name:"tab2",
                                id:2,
                                content:"SecondTab",
                                title:"Dynamic-2",
                                templateUrl:"second.html"


                              },

                               {
                                Name:"tab3",
                                id:3,
                                content:"ThirdTab",
                                title:"Dynamic-3",
                                templateUrl:"third.html"
                              }
                       ];

 }]);

Answer 1

model.js （只需使用我在下面编写的代码更改此文件的代码。它将为您提供所需的结果） 我们必须提供广播延迟才能使其发挥作用。

define(['jquery','ocLazyLoad','cssinjector'], function() {
    var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']);
    app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector','$rootScope','$timeout',
    function($scope,$ocLazyLoad,cssInjector,$rootScope,$timeout) {

            alert("modal-loaded");

             $ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js")
             .then(function(){
                alert("modal1 loaded");
                $scope.view="http://localhost:8080/tabs/view.html";
                cssInjector.add("http://localhost:8080/tabs/style.css");
        });


            // ARRAY

                var items=[
                              {
                                    Name:"tab1",
                                    id:1
                                   },

                                   {
                                    Name:"tab2",
                                    id:2
                                  },

                                   {
                                    Name:"tab3",
                                    id:3
                                  }
                           ];

                     $timeout(function(){
                         $rootScope.$broadcast('itmObj', items);
               },0);   

     }]);




       angular.element(function() {
       angular.bootstrap(document, ['App']);
        });         
     });

Answer 2

如果您在父控制器中广播如此

$scope.$broadcast('itmObj',{ itemsArray: items});

然后你可以在子控制器中使用on-catch 并且你在args.itemsArray中有items数组

$scope.$on('itmObj', function (event, args) {
 var x = args.itemsArray; // args.itemsArray is your items from parentcontroller
 });

Answer 3

尝试在延迟加载modalController和模态视图时添加一个promise将如下所示 的 Modal.js

    define(['jquery','ocLazyLoad','cssinjector'], function() {
    var app=angular.module('App', ['angular.css.injector','oc.lazyLoad']);
    app.controller('mycontroller', ['$scope','$ocLazyLoad','cssInjector',
    function($scope,$ocLazyLoad,cssInjector) {

            alert("modal-loaded");
            // ARRAY
            var items=[{
                           Name:"tab1",
                           id:1
                       },{
                           Name:"tab2",
                           id:2
                       },{
                           Name:"tab3",
                           id:3
                       }];

            var lazyLoadModal1 = function(){
                 var deferred = $q.defer();
                 $ocLazyLoad.load("http://localhost:8080/tabs/js/modal1.js")
                 .then(function(){
                     alert("modal1 loaded");
                     $scope.view="http://localhost:8080/tabs/view.html";
                     cssInjector.add("http://localhost:8080/tabs/style.css");

                     deferred.resolve();
                  },function(){
                     deferred.reject();
                  });  
                return deferred.promise;
           };
           var init = (function(){
                 lazyLoadModal1().then(function(){
                    $scope.$broadcast('itmObj', {item:items});
                 });
           })();
     }]);

<强> View.html

<div ng-controller="modalcontroller">
    <div ng-repeat="vm in itemsArray">
     <p>{{vm.Name}}</p>
     <p>{{vm.id}}</p>
    </div>
</div>

<强> Modal1.js

angular.module('App', ['angular.css.injector','oc.lazyLoad'])
 .controller("modalcontroller", ['$scope','$ocLazyLoad','cssInjector',
 function($scope,$ocLazyLoad,cssInjector){

        alert("In modal Controller");

        $scope.$on("broadcast-started", function (event, data){
                $scope.itemsArray=data.item;
                console.log($scope.itemsArray);
    });

 }]);