有一个带有按钮的视图,该按钮具有角度指令ng-disabled,绑定到某些模型属性.复杂的是按钮位于< li>内.标签.
我想要做的是设置模型属性,编译视图,然后根据模型属性的值检查按钮是否正确启用或禁用;但是,当我尝试编译时,列表为空:只有< ul>< / ul>标签.
有没有办法完成我想要做的事情?
这是我的代码:
—————–查看——————-
<div ng-show="group.AreItemsExpanded">
<div>
<ul>
<li ng-repeat="item in group.Items">
<div>
{{item.Name}}
</div>
<div>
<button id="btn" type="button" ng-click="clickItem(item)"
ng-disabled="!permissions.IsAllowed || !item.IsClickable">
Click!
</button>
</div>
</li>
</ul>
</div>
</div>
—————–测试——————
describe('testing view', function(){
beforeEach(module('groups.templates'));
var $scope;
var item;
var $templateCache;
var $compile;
beforeEach(inject(function($rootScope, _$templateCache_, _$compile_){
$templateCache = _$templateCache_;
$compile = _$compile_;
item = {
Name: 'testitem0',
IsClickable: false
};
$scope = $rootScope.$new();
$scope.group = {
Items: [item],
AreItemsExpanded: true
};
$scope.permissions = {IsAllowed: false};
}));
describe('testing button', function(){
it('should be enabled', function(){
$scope.group.Items[0].IsClickable = true;
$scope.permissions.IsAllowed = true;
var html = $templateCache.get('view.html');
var view = $compile(angular.element(html))($scope);
expect(view.find('button')[0].disabled).toEqual(false);
});
it('should be disabled', function(){
$scope.group.Items[0].IsClickable = false;
$scope.permissions.IsAllowed = true;
var html = $templateCache.get('view.html');
var view = $compile(angular.element(html))($scope);
expect(view.find('button')[0].disabled).toEqual(true);
});
});
});
————- karma.conf.js ———————
// Karma configuration
// Generated on Sat Dec 06 2014 13:06:16 GMT-0700 (Mountain Standard Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-resource/angular-resource.js',
'node_modules/angular-route/angular-route.js',
'node_modules/angular-bootstrap/ui-bootstrap.js',
'*.js',
'*.html'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
"*.html": ["ng-html2js"]
},
ngHtml2JsPreprocessor: {
moduleName: "groups.templates"
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
最佳答案 发现了问题.所有遗漏的都是声明
$scope.$digest();
转让后
var view = $compile(angular.element(html))($scope);