自定義指令不顯示UI視圖

我有一個自定義的「3-test-directive」，我想調用它來顯示文本。當我在頁面partial-home.html中使用這個指令時，它並沒有用指令中的任何文本來顯示我（看起來指令不起作用）。自定義指令不顯示UI視圖

當我在index.htm中使用相同的代碼< 3-test-directive />時，該指令被正確解析。爲什麼沒有partial-home.html的人沒有工作，我該如何解決這個問題？

演示此代碼：https://plnkr.co/edit/wy5gkUlXmbRpyrdqwHwd?p=preview

的index.html

<!-- CSS (load bootstrap) --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <style> 
     .navbar { border-radius:0; } 
    </style> 

    <!-- JS (load angular, ui-router, and our custom js file) --> 
    <script src="https://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script> 
    <script src="app.js"></script> 
</head> 

<!-- apply our angular app to our site --> 
<body ng-app="routerApp"> 

<!-- NAVIGATION --> 
<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" ui-sref="#">AngularUI Router</a> 
    </div> 
    <ul class="nav navbar-nav"> 
     <li><a ui-sref="home">Home</a></li> 
     <li><a ui-sref="about">About</a></li> 
    </ul> 
</nav> 

<!-- MAIN CONTENT --> 
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== --> 
<div class="container"> 
    <div ui-view></div> 
</div> 

<div class="text-center"> 
    <p>A tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p> 
    <p>View the tutorial: <a href="http://scotch.io/tutorials/javascript/angular-routing-using-ui-router" target="_blank">AngularJS Routing using UI-Router</a></p> 
</div> 

</body> 
</html>

app.js

var routerApp = angular.module('routerApp', ['ui.router']); 

routerApp.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 

     // HOME STATES AND NESTED VIEWS ======================================== 
     .state('home', { 
      url: '/home', 
      templateUrl: 'partial-home.html' 
     }) 

     // nested list with custom controller 
     .state('home.list', { 
      url: '/list', 
      templateUrl: 'partial-home-list.html', 
      controller: function($scope) { 
       $scope.dogs = ['Bernese', 'Husky', 'Goldendoodle']; 
      } 
     }) 

     // nested list with just some random string data 
     .state('home.paragraph', { 
      url: '/paragraph', 
      template: 'I could sure use a drink right now.' 
     }) 

     // ABOUT PAGE AND MULTIPLE NAMED VIEWS ================================= 
     .state('about', { 
      url: '/about', 
      views: { 
       '': { templateUrl: 'partial-about.html' }, 
       '[email protected]': { template: 'Look I am a column!' }, 
       '[email protected]': { 
        templateUrl: 'table-data.html', 
        controller: 'scotchController' 
       } 
      } 

     }); 

}); 

routerApp.controller('scotchController', function($scope) { 

    $scope.message = 'test'; 

    $scope.scotches = [ 
     { 
      name: 'Macallan 12', 
      price: 50 
     }, 
     { 
      name: 'Chivas Regal Royal Salute', 
      price: 10000 
     }, 
     { 
      name: 'Glenfiddich 1937', 
      price: 20000 
     } 
    ]; 

});

來源

2016-09-30 Vimal Basdeo

不能包括在模板腳本......他們得到剝離出來。

只需註冊您的JS指令文件

var routerApp = angular.module('routerApp', ['ui.router']) 


.directive("w3TestDirective", function() { 
    return { 
     restrict:'E', 
     template : "<h1>Made by a directive!</h1>" 
    }; 
})

DEMO

來源

2016-09-30 02:32:40 charlietfl

自定義指令不顯示UI視圖

回答

相關問題