Using Object.defineProperty with Angular throws TypeError: Cannot assign to read only property (property) of #<Object>

Question

I have an object on my scope, and I want that object to have a few non-enumerable properties, but after setting the enumerable descriptor to false, whenever I try to change the value, I get: "TypeError: Cannot assign to read only property (property) of #"

... even though I am specifically setting it's writeable and configurable descriptors to true. Why is this happening, and what can I do to fix it? In non-strict mode it doesn't throw an error, it just doesn't do anything. This should work fine according to: MDN ...

code:

 'use strict' angular.module('app', []); angular.module('app').controller('TestingCtrl',['$scope', function($scope){ var that = this; this.content = { contentArea: {} }; function updateIsEmpty(){ that.content.contentArea.isEmpty = Object.keys(that.content.contentArea).length === 0; console.log(that.content.contentArea) console.log(Object.keys(that.content.contentArea)); } this.addSomethingToCA = function(val){ that.content.contentArea.something = val; updateIsEmpty(); }; this.removeSomethingFromCA = function(){ delete that.content.contentArea.something; updateIsEmpty(); }; (function init(){ Object.defineProperty(that.content.contentArea, 'isEmpty', { enumerable: false , value: true , configurable: true , writeable: true }); })(); }]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script> <div ng-app="app"> <div ng-controller="TestingCtrl as testingctrl"> <button ng-if="testingctrl.content.contentArea.isEmpty === true" ng-click="testingctrl.addSomethingToCA('is weird')">add something</button> <button ng-click="testingctrl.removeSomethingFromCA()">remove something</button> <ul> <li ng-repeat="(key, val) in testingctrl.content.contentArea"> key: {{ key }} val: {{ val }} </li> </ul> </div> </div> 

if you run the above code snippet it throws: TypeError:

 Cannot assign to read only property 'isEmpty' of #<Object>
    at updateIsEmpty (http://stacksnippets.net/js:35:38)
    at removeSomethingFromCA (http://stacksnippets.net/js:46:5)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:161:190
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:178:83
    at h.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:101:273)
    at h.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:102:48)
    at HTMLButtonElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:178:65)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:27:15
    at Array.forEach (native)
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js:7:255)

Answer 1

You have a typo. Your writeable key in the property descriptor should be writable .