I have an angular directive with a method that changes the scope in order to show/hide various elements with ng-show. Some of the scope properties are rendering and some are not, which is very strange.
Directive:
.directive('ktTable', function(Query) {
return {
restrict: "AC",
templateUrl: '/partials/table.html',
link: function(scope, elm, attrs) {
scope.openForm = function(options, object) {
...
else if (options.checkin) {
scope.isDocument = true;
scope.new_object_type = "Document";
scope.isNew = false;
scope.isCheckin = true;
}
...
};
scope.$watch('isNew', function(nv, ov) {
console.log("isNew", nv, ov);
});
scope.$watch('isCheckin', function(nv, ov) {
console.log("isCheckin", nv, ov);
});
}
};
});
Template:
<fieldset class="newFile" ng-show="isNew || isCheckin">
<legend>New {{new_object_type}}</legend>
<input type="file" name="newFile" />
</fieldset>
...
<legend><span ng-show="isNew">New </span>{{new_object_type}} Information</legend>
When I refresh the page, the $watch output is undefined, undefined, which is fine. The forms aren't in view anyway. When I call this method from ng-click the console output is:
isNew false undefined directives.js:138
isCheckin true undefined directives.js:141
Which is exactly what I'm looking for, but the template is not updated. Calling scope.$apply() wrapping these changes or calling scope.$apply() after the changes doesn't seem to do anything to it. If I initialize the $scope.isNew property in the controller to true, I see the fieldset and the scope.new_object_type property is set correctly. However, the scope.isNew/isCheckin properties never seem to affect the template. What should I do?