Angularjs - 自定义指令无法访问控制器范围
Angularjs - Custom directive cannot access controller scope
我正在使用 Angular JS 构建单页应用程序。问题是自定义指令 mySlider 无法访问我分配给模板的控制器的范围。有没有办法解决这个问题?这是我的文件
index.html
<script src="js/dishesapp.js"></script>
<div ng-view></div>
partials/dishestemplate.html
<div my-slider></div>
directives/slider.html
<div id="dishsliderholder">
<ul class="bxslider">
<li class="dishdetails" ng-repeat="dish in dishes">
<div class="item">
<div class="title">{{dish.name}}</div>
<div class="description">{{dish.description}}</div>
</div>
</li>
</ul>
</div>
dishesapp.js
var dishesApp = angular.module('dishesApp', ['ngRoute']);
dishesApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'partials/default.html'})
.when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
.when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
.when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
.when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
.when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
.when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
.otherwise({redirectTo: '/'});
});
dishesApp.controller('NoodlesCtrl', function ($scope, $http) {
$scope.mycategory = "Noodles";
$http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
$scope.dishes = response.records;
});
});
dishesApp.controller('RollsCtrl', function ($scope, $http) {
$scope.mycategory = "Rolls";
$http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
$scope.dishes = response.records;
});
});
……………..
dishesApp.directive('mySlider', function() {
return {
restrict: 'A',
templateUrl: 'directives/slider.html',
link: function (scope, element, attrs) {
angular.element( document.querySelector('.bxslider')).bxSlider();
angular.element( document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
}
};
});
由于指令不是孤立的,您可以在指令 link
函数中访问所有控制器的作用域变量。
您的代码正在运行。正如@Rhumbori 评论的那样,http://jsfiddle.net/w5mh927p/ 工作正常。
尝试在 link
函数中添加一行:console.log(scope)
并检查您的开发人员工具控制台中范围内的所有内容。 https://www.dropbox.com/s/q3tmgapcxn8e71p/Screenshot%202015-05-31%2002.17.33.png?dl=0
终于找到问题了。在 DOM 完成渲染之前调用了滑块对象,因此滑块不显示任何内容。我使用 $timeout 来调用滑块 post 渲染。这是我的做法
dishesApp.directive('mySlider', function ($timeout) {
return {
restrict: 'A',
replace: true,
templateUrl: 'directives/slider.html',
link: function (scope, element, attrs) {
$timeout(function () {
angular.element(document.querySelector('.bxslider')).bxSlider();
angular.element(document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
});
}
};
});
我正在使用 Angular JS 构建单页应用程序。问题是自定义指令 mySlider 无法访问我分配给模板的控制器的范围。有没有办法解决这个问题?这是我的文件
index.html
<script src="js/dishesapp.js"></script>
<div ng-view></div>
partials/dishestemplate.html
<div my-slider></div>
directives/slider.html
<div id="dishsliderholder">
<ul class="bxslider">
<li class="dishdetails" ng-repeat="dish in dishes">
<div class="item">
<div class="title">{{dish.name}}</div>
<div class="description">{{dish.description}}</div>
</div>
</li>
</ul>
</div>
dishesapp.js
var dishesApp = angular.module('dishesApp', ['ngRoute']);
dishesApp.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'partials/default.html'})
.when('/Noodles', {templateUrl: 'partials/dishtemplate.html', controller: 'NoodlesCtrl'})
.when('/Rolls', {templateUrl: 'partials/dishtemplate.html', controller: 'RollsCtrl'})
.when('/Pancakes', {templateUrl: 'partials/dishtemplate.html', controller: 'PancakesCtrl'})
.when('/Rice', {templateUrl: 'partials/dishtemplate.html', controller: 'RiceCtrl'})
.when('/FamilyStyle', {templateUrl: 'partials/dishtemplate.html', controller: 'FamilyStyleCtrl'})
.when('/Others', {templateUrl: 'partials/dishtemplate.html', controller: 'OthersCtrl'})
.otherwise({redirectTo: '/'});
});
dishesApp.controller('NoodlesCtrl', function ($scope, $http) {
$scope.mycategory = "Noodles";
$http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
$scope.dishes = response.records;
});
});
dishesApp.controller('RollsCtrl', function ($scope, $http) {
$scope.mycategory = "Rolls";
$http.get("http://www.blabla.com/Data/dishes.php").success(function (response) {
$scope.dishes = response.records;
});
});
……………..
dishesApp.directive('mySlider', function() {
return {
restrict: 'A',
templateUrl: 'directives/slider.html',
link: function (scope, element, attrs) {
angular.element( document.querySelector('.bxslider')).bxSlider();
angular.element( document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
}
};
});
由于指令不是孤立的,您可以在指令 link
函数中访问所有控制器的作用域变量。
您的代码正在运行。正如@Rhumbori 评论的那样,http://jsfiddle.net/w5mh927p/ 工作正常。
尝试在 link
函数中添加一行:console.log(scope)
并检查您的开发人员工具控制台中范围内的所有内容。 https://www.dropbox.com/s/q3tmgapcxn8e71p/Screenshot%202015-05-31%2002.17.33.png?dl=0
终于找到问题了。在 DOM 完成渲染之前调用了滑块对象,因此滑块不显示任何内容。我使用 $timeout 来调用滑块 post 渲染。这是我的做法
dishesApp.directive('mySlider', function ($timeout) {
return {
restrict: 'A',
replace: true,
templateUrl: 'directives/slider.html',
link: function (scope, element, attrs) {
$timeout(function () {
angular.element(document.querySelector('.bxslider')).bxSlider();
angular.element(document.querySelector('#dishsliderholder')).css("background-size", getSliderHolderBackgroundSize());
});
}
};
});