আমার কাছে দুটি কন্ট্রোলার রয়েছে এবং একটি অ্যাপ্লিকেশন কারখানার সাথে তাদের মধ্যে ডেটা ভাগ করি।
কোনও লিঙ্ক ক্লিক করা হলে প্রথম নিয়ামক মডেল অ্যারেতে একটি উইজেট যুক্ত করে (প্লাগিনস ডিসপ্লেড)। উইজেটটি অ্যারেতে ঠেলাঠেলি করা হয় এবং এই পরিবর্তনটি ভিউতে প্রতিফলিত হয় (যা অ্যারের সামগ্রীটি দেখানোর জন্য এনজি-রিপিট ব্যবহার করে):
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>উইজেটটি কে-প্লাগইন, সরান এবং পুনরায় আকার দেওয়ার জন্য তিনটি নির্দেশে নির্মিত built সরানোর নির্দেশটি কে 2 প্লাগইন নির্দেশের টেম্পলেটটিতে একটি স্প্যান যুক্ত করে। স্প্যানটি ক্লিক করার সময়, ভাগ করা অ্যারেতে সঠিক উপাদানটি মুছে ফেলা হয় Array.splice()। ভাগ করা অ্যারে সঠিকভাবে আপডেট করা হয়েছে, তবে পরিবর্তনটি দৃশ্যটিতে প্রতিফলিত হয় না । তবে অপসারণের পরে যখন অন্য একটি উপাদান যুক্ত করা হয় তখন দৃশ্যটি সঠিকভাবে রিফ্রেশ হয় এবং পূর্ব-মোছা উপাদানটি প্রদর্শিত হয় না।
আমার কী ভুল হচ্ছে? আপনি আমাকে ব্যাখ্যা করতে পারেন কেন এটি কাজ করে না? আমি AngularJS এর সাথে যা করার চেষ্টা করছি তার করার আরও ভাল উপায় আছে?
এটি আমার সূচক html:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js">
</script>
<script src="main.js"></script>
</head>
<body>
<div ng-app="livePlugins">
<div ng-controller="pluginlistctrl">
<span>Add one of {{pluginList.length}} plugins</span>
<li ng-repeat="plugin in pluginList">
<span><a href="" ng-click="add()">{{plugin.name}}</a></span>
</li>
</div>
<div ng-controller="k2ctrl">
<div ng-repeat="pluginD in pluginsDisplayed">
<div k2plugin pluginname="{{pluginD.name}}" pluginid="{{pluginD.id}}"></div>
</div>
</div>
</div>
</body>
</html>এটি আমার মেইন.জেএস:
var app = angular.module ("livePlugins",[]);
app.factory('Data', function () {
return {pluginsDisplayed: []};
});
app.controller ("pluginlistctrl", function ($scope, Data) {
$scope.pluginList = [{name: "plugin1"}, {name:"plugin2"}, {name:"plugin3"}];
$scope.add = function () {
console.log ("Called add on", this.plugin.name, this.pluginList);
var newPlugin = {};
newPlugin.id = this.plugin.name + '_' + (new Date()).getTime();
newPlugin.name = this.plugin.name;
Data.pluginsDisplayed.push (newPlugin);
}
})
app.controller ("k2ctrl", function ($scope, Data) {
$scope.pluginsDisplayed = Data.pluginsDisplayed;
$scope.remove = function (element) {
console.log ("Called remove on ", this.pluginid, element);
var len = $scope.pluginsDisplayed.length;
var index = -1;
// Find the element in the array
for (var i = 0; i < len; i += 1) {
if ($scope.pluginsDisplayed[i].id === this.pluginid) {
index = i;
break;
}
}
// Remove the element
if (index !== -1) {
console.log ("removing the element from the array, index: ", index);
$scope.pluginsDisplayed.splice(index,1);
}
}
$scope.resize = function () {
console.log ("Called resize on ", this.pluginid);
}
})
app.directive("k2plugin", function () {
return {
restrict: "A",
scope: true,
link: function (scope, elements, attrs) {
console.log ("creating plugin");
// This won't work immediately. Attribute pluginname will be undefined
// as soon as this is called.
scope.pluginname = "Loading...";
scope.pluginid = attrs.pluginid;
// Observe changes to interpolated attribute
attrs.$observe('pluginname', function(value) {
console.log('pluginname has changed value to ' + value);
scope.pluginname = attrs.pluginname;
});
// Observe changes to interpolated attribute
attrs.$observe('pluginid', function(value) {
console.log('pluginid has changed value to ' + value);
scope.pluginid = attrs.pluginid;
});
},
template: "<div>{{pluginname}} <span resize>_</span> <span remove>X</span>" +
"<div>Plugin DIV</div>" +
"</div>",
replace: true
};
});
app.directive("remove", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.remove(element);
})
};
});
app.directive("resize", function () {
return function (scope, element, attrs) {
element.bind ("mousedown", function () {
scope.resize(element);
})
};
});