0
我有以下HTML：呼叫指令
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div class="container">
<div ng-view=""></div>
</div>
<!--Core JS Libraries-->
<script src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<!--Core UI Library-->
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//Define an angular module for our app
var myApp = angular.module('myApp', ['ngRoute']);
//Define Routing for app
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'pages/View1.html',
controller: 'HomeController'
}).
when('/design', {
templateUrl: 'pages/2.html',
controller: 'DesignController'
}).
otherwise({
redirectTo: '/home'
});
}]);
var controllers = {};
controllers.HomeController = function ($scope) {
$scope.GetView2 = function ($scope) {
$('#one').hide();
$('#two').show();
myApp.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'pages/view2.html'
}
});
};
};
controllers.DesignController = function ($scope) {
};
//adding the controllers to myApp angularjs app
myApp.controller(controllers);
</script>
</body>
</html>
而且我View1.html：
<button ng-click="GetView2()">Get View 2</button>
<br />
<div class="row" id="one">
<h1>View 1</h1>
</div>
<div class="row" id="two" style="display: none;">
<h1>View 2</h1>
<!--change the display to block and load partial here on above button click-->
<my-directive></my-directive>
</div>
而且View2.html：
<h3>Something in View2</h3>
現在，當我運行HTML時，在按鈕上單擊，查看1標題chanegs查看2標題，所以我的路由和GetView2（）函數調用s正在工作。但我的<my-directive>沒有得到更新與我在templateUrl指令中調用的View2.html。
我是AngularJS的新手，嘗試將ng-view和指令用於多視圖類型的場景。我讀過，我應該避免嵌套的意見，並實施指令，但我沒有得到如何實現這樣一個簡單的情況。
我可以很容易地用jQuery替換ID爲「2」的Div的內容，但我試圖用適當的angularjs方法來做到這一點。
請發佈指令'my-directive'代碼 –
@MaximShoustin my-directive代碼也存在於上面的代碼中。我已經發布了整個代碼。 –
@Pawan你正在控制器的作用域方法中定義你的指令。這顯然是錯誤的，它不會工作。 – Stewie